Paleta możliwości web developera

Paleta możliwości
web 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
Front-end
HTML, Javascript (biblioteki), CSS (stylowanie)
Back-end
kod aplikacji, biblioteki, serwer aplikacji
Usługi
baza danych, mailing, monitoring aplikacji

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-end
wybrane 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-frameworks
https://github.com/showcases/css-libraries

PHP PHP Hypertext Preprocessor
Skryptowy język programowania
class Person {
var $name;
function Person($name)
{
$this ->name = $name;
}
function sayHi()
{
return 'Hi, I am ' .$this->name;
}
}

Ruby
class Person
def initialize (name)
@name = name
end
def say_hi
"Hi, I am #{@name}"
end
end

Python
class Person:
def __init__(name):
self.name = name
def say_hi:
"Hi, I am %s" % self.name

Frameworki MVC
MVC 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

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 - otoTeam
Aplikacja 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.
Repozytorium
https://github.com/miksturait/ototeam
Online
http://ototeam-mikstura.herokuapp.com

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 developmentu
wybrane 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
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

Continuous Deployments
Częsta aktualizowanie aplikacji
- jeśli wszystkie testy przechodzą, to automatyczny deploy
- kilkanaście aktualizacji dziennie
push web hook deploy
repozytorium serwer integracyjny web serwer
nowy kod
analiza kodu
web hook

Dziękuję za uwagę
@TomaszBorowski
tomaszborowski.com

Paleta możliwości web developera

Recommandé

Recommandé

Contenu connexe

Similaire à Paleta możliwości web developera

Similaire à Paleta możliwości web developera (20)

Plus de Tomasz Borowski

Plus de Tomasz Borowski (11)

Paleta możliwości web developera