Paleta możliwości web developera
40
Paleta możliwości web developera wykorzystywane technologie i narzędzia Tomasz Borowski, 2014-12-02 Bielsko-Biała
-
Upload
tomasz-borowski -
Category
Technology
-
view
792 -
download
3
Transcript of Paleta możliwości web developera
Paleta możliwościweb developera
wykorzystywane technologie i narzędzia
Tomasz Borowski, 2014-12-02 Bielsko-Biała
Paleta możliwości
➔ języki, frameworki oraz biblioteki
➔ usługi dla aplikacji
➔ narzędzia do developmentu
Technology Stack
Back-endkod aplikacji, biblioteki, serwer aplikacji
Usługibaza danych, mailing, monitoring aplikacji
Front-endHTML, Javascript (biblioteki), CSS (stylowanie)
Front-endwybrane języki
HTML HyperText Markup Language
Hipertekstowy język znaczników,definiuje co ma być wyświetlane
<html>
<head>
<title>Awesome strona!</title>
</head>
<body>
<div class=”pink”> Strona o kucykach </div>
</body>
</html>
HAML HTML abstraction markup language
Hipertekstowy język znaczników,definiuje co ma być wyświetlane
%html
%head
%title Awesome strona!
%body
.pink Strona o kucykach
CSS Cascading Style Sheets
Kaskadowe arkusze stylów,definiuje jak ma być wyświetlane
div {
font-size: 14px;
font-color: black;
}
div.pink {
font- color: pink;
}
SASS Syntactically Awesome Stylesheets
Kaskadowe arkusze stylów,definiuje jak ma być wyświetlane
div
font-size: 14px
font-color: black
&.pink
font- color: pink
JavaScript
Skryptowy język programowania,definiuje jak ma się zachowywać
var Person;
Person = (function() {
function Person(name) {
this.name = name;
}
Person.prototype.sayHi = function() {
return alert("Hi, I am " + this.name);
};
return Person;
})();
CoffeeScript
Skryptowy język programowania,kompilowany do JavaScriptu
class Person
constructor: (name) ->
@name = name
sayHi: ->
alert "Hi, I am #{@name}"
Frond-endwybrane biblioteki i frameworki
jQuery
Biblioteka dla języka JavaScript
- manipulacje na drzewie DOM- obsługa wydarzeń- obsługa animacji- obsługa zapytań AJAX
jQuery('body').css('color', 'pink');
jQuery('div.pink').append('Awesome!');
Bootstrap
Framework CSS, JavaScript
- możliwość wykorzystania gotowych szablonów- responsywne stylowanie- komponenty HTML / JavaScript
EmberJS
Framework MVC Javascript
- budowa aplikacji jednostronicowych- zarządzanie danymi po stronie klienta- dynamiczne szablony Handlebars
Wiecej informacji:https://github.com/showcases/front-end-javascript-frameworkshttps://github.com/showcases/css-libraries
Back-endwybrane języki
PHP PHP Hypertext Preprocessor
Skryptowy język programowaniaclass Person {
var $name;
function Person($name)
{
$this->name = $name;
}
function sayHi()
{
return 'Hi, I am '.$this->name;
}
}
Ruby
Skryptowy język programowaniaclass Person
def initialize(name)
@name = name
end
def say_hi
"Hi, I am #{@name}"
end
end
Python
Skryptowy język programowaniaclass Person:
def __init__(name):
self.name = name
def say_hi:
"Hi, I am %s" % self.name
Back-endwybrane frameworki
Frameworki MVCMVC to wzorzec architektoniczny służący do organizowania struktury aplikacji posiadających graficzne interfejsy użytkownika.
MVC zakłada podział aplikacji na trzy główne części:● Model: jest reprezentacją problemu bądź logiki aplikacji.
● Widok: opisuje, jak wyświetlić pewną część modelu w ramach interfejsu użytkownika.
● Kontroler: przyjmuje dane wejściowe od użytkownika i reaguje na jego poczynania, zarządzając aktualizacje modelu oraz odświeżenie widoków.
Wikipedia
Frameworki MVC
Frameworks
Ruby on Rails
Dlaczego
- mało konfigurowania, mało kodu- przyjemny w kodowaniu i czytaniu- łatwość w instalacji gemów (pakietów)- duże i bardzo aktywne community- wsparcie dla różnorodnych baz danych- szybkie prototypowanie dzięki generatorom kodu- ...
Ruby on Rails
Przykładowa aplikacja - otoTeamAplikacja Ruby on Rails do zapraszania znajomych na spotkania z wykorzystaniem kolejki zaproszeń.
Aplikacja jest tworzona podczas warsztatów Ruby on Rails organizowanych przez fundację Mikstura IT.
Repozytoriumhttps://github.com/miksturait/ototeam
Onlinehttp://ototeam-mikstura.herokuapp.com
Usługiwybrane aplikacje
Heroku
Hosting w platformie chmurowej
- darmowy dla prostych aplikacji- duża skalowalność- proste w instalacji dodatki- nie wymaga wiedzy z administracji serwerami
Alternatywy:
Amazon S3 Simple Storage Service
Hosting plików w chmurze
- darmowy do 1GB wychodzącego transferu miesięcznie- zarządzanie zezwoleniami- usługa niezbędna przy korzystaniu z Heroku
Alternatywy:
PostgreSQL
Relacyjna baza danych SQL
- darmowa (open source)- bardzo wydajna- możliwość definiowania funkcji i widoków- dodatkowe typy danych np. array, hstore
Alternatywy:
Mailgun
API do wysyłania i przekazywania maili
- darmowy do 10 000 maili miesięcznie- tracking wysyłanych maili- przekierowywanie maili
Alternatywy:
New Relic
Monitorowanie aplikacji
- analiza obciążenia serwera- analiza zapytań SQL- analiza ruchu w aplikacji- monitorowanie wydajności aplikacji
Alternatywy:
Narzędzia do developmentuwybrane aplikacje
Travis-CI
Wykonywanie testów na zdalnym serwerze
- testy uruchamiane przy każdej aktualizacji repozytorium- opcjonalne contiuous deployment- darmowe dla projektów open source
Wykonywanie testów na zdalnym serwerze
- testy uruchamiane przy każdej aktualizacji repozytorium- opcjonalne contiuous deployment- darmowe dla projektów open source
Alternatywy:
Code Climate
Analiza statyczna kodu
- detekcja powtórzeń kodu- detekcja skomplikowanych metod / klas- obliczanie pokrycia kodu testami- darmowa dla projektów open source
Alternatywy:
Gemnasium
Analiza wersji wykorzystywanych bibliotek
- powiadomienia o nowych wersjach bibliotek- ostrzeżenia przed dziurami bezpieczeństwa- listowanie zmian w danej bibliotece
Jak to działa w praktyce?
Continuous Deployments
Częsta aktualizowanie aplikacji - jeśli wszystkie testy przechodzą, to automatyczny deploy- kilkanaście aktualizacji dziennie
repozytorium serwer integracyjny web serwer
push web hook deploy
nowy kod
analiza koduweb hook
@TomaszBorowski
tomaszborowski.com
Dziękuję za uwagę
