Post on 02-Dec-2014
description
Produkcja aplikacji internetowychwykorzystywane technologie
mgr inż. Tomasz Borowski, 2014-03-22 Cieszyn
mgr inż. Tomasz Borowski
edukacja: BWS im. Tyszkiewicza, Uniwersytet Jagielońskipraca: Selleo, tbprojectsdoświadczenie: w webdevelopmencie: 7 latprojekty w Php: ~15projekty Ruby: ~10projekty w JS: ~5technologie: Ruby on Rails, SQL, Sencha Touch,
Ember.js, Coffeescript, HAML, Rspec.
Kilka słów o wykładowcy
Szeroki wybór
aplikacje mobilne
sterowniki
sieci komputerowe
aplikacje desktopowe
aplikacje internetowe
symulacje
gry wideo
część 1: Aplikacje Internetowe
Dlaczego właśnie web development?
Mogę stworzyć własna stronę z recenzjami filmów! ;)
Dlaczego właśnie web development?
Jest duże zapotrzebowanie - mogę na tym zarobić!
Dlaczego właśnie web development?
Cały czas się zmieniają technologie,a ja mogę uczyć się nowych rzeczy!
Dlaczego właśnie web development?
Mogę poznać inspirujących ludzi i razem tworzyć open source’owe rozwiązania!
Dlaczego właśnie web development?
Wszystko zmierza do internetu...
Cechy dobrego web developera
Cechy dobrego web developera
Wszechstronność umiejętności
admin. serwera
kodowanie server-side
kodowanie client-side
stylowanie + ux
Full Stack Developer
Cechy dobrego web developera
Wszechstronność komunikacja
z współpracownikami
z klientem
pisemna i głosowa
ciągła i elastyczna
obsługa przypadków brzegowych
Cechy dobrego web developera
Profesjonalizm jakość rozwiązania
stabilność
intuicyjność
krótkie, zrozumiałe metody oraz klasy
Cechy dobrego web developera
Profesjonalizm jakość kodu
brak nadmiarowego kodu
testy automatyczne
Cechy dobrego web developera
Otwartość
dystans do swego kodu
chęć otrzymania konstruktywnej krytyki
chęć dawania konstruktywnej krytyki
Cechy dobrego web developera
Cierpliwość
dziel i zwyciężaj zadania
poznawanie rozwiązań wymaga czasu
porażki to część procesu uczenia się
Jak zacząć?
Jak zacząć?
Dać się czymś zainspirować i zacząć drążyć temat
czym jest grywalizacja?
jakie mogą być jej zastosowania?
jakie są istniejące rozwiązania?
jakich błędów nie popełniać?
Jak zacząć?
Wymyślić sobie konkretny projekt do realizacji
jak ma wyglądać?
jakie technologie chcę poznać?
jakie warunki ukończenia?
Jak zacząć?
Poświęcić swój czas i zacząć działać
ile godzin... dziennie?
kiedy gotowa pierwsza wersja?
a może potrzebuję pomocy?
Jak zacząć?
Zbierz konstruktywny feedback i udoskonalaj
czy kierunek jest dobry?
jakie zmiany są najważniejsze?
To działa!
Eksperyment
Grywalizacja bywa ciekawa i pożyteczna
Eksperyment
Grywalizacja pracy może rozwiązać problemy
Invoicing Module
TODO:
Some Task
Some Task
Backlog In Progress Done
Some Task
Some Task
Eksperyment
Chciałbym poznać nowe technologie
Eksperyment
Eksperyment
Jakie jest zdanie potencjalnych użytkowników
+150exp
+520exp
+330exp
+120exp
+480exp
+90exp
Eksperyment
Eksperyment
Opowiedzieć innym o zebranym doświadczeniu
część 2: Technologie Webowez punktu widzenia Ruby on Rails developera
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
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
PostgreSQL
Relacyjna baza danych SQL
- darmowa (open source)- bardzo wydajna- możliwość definiowania funkcji i widoków- dodatkowe typy danych np. array, hstore
Mailgun
API do wysyłania i przekazywania maili
- darmowy do 10 000 maili miesięcznie- tracking wysyłanych maili- przekierowywanie maili
New Relic
Monitorowanie aplikacji
- analiza obciążenia serwera- analiza zapytań SQL- analiza ruchu w aplikacji- monitorowanie wydajności aplikacji
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
Code Climate
Analiza statyczna kodu
- detekcja powtórzeń kodu- detekcja skomplikowanych metod / klas- obliczanie pokrycia kodu testami- darmowa dla projektów open source
Gemnasium
Analiza wersji wykorzystywanych bibliotek
- powiadomienia o nowych wersjach bibliotek- ostrzeżenia przed dziurami bezpieczeństwa- listowanie zmian w danej bibliotece
część 3: Agilezwinne techniki wytwarzania oprogramowania
Samozarządzający się zespół
Po co nam Project Manager?
- odpowiedzialni ludzie, wszyscy są równi- każdy może komunikować się z klientem
Standup
15 minut dziennie na omówienie “taktyki”
- omówienie postępów z ostatnich 24h- detekcja problemów
Sprint
Bo milestone trwa zbyt długo
- krótkie iteracje (np. 2-tygodniowe), częste planowanie- specyfikacja długoterminowa nie ma sensu
Interakcja z klientem
Ciągła gotowość na zmiany
- klient jest źródłem informacji- feedback dostarczany regularnie- wspólne planowanie sprintów
Test Driven Development
Zanim zaimplementujesz, przetestuj
- kod powinien być automatycznie testowany- testy niezbędne podczas refaktoringu- testy “gwarantem” stabilności aplikacji
Pair Programming
Wspólne rozwiązywanie problemu - jedna osoba koduje, druga weryfikuje oraz wyznacza cel- dobra metoda dzielenia się wiedzą- programowanie z “kaczuszką”- częste zmiany roli
Code Review
Jakość kodu przede wszystkim - wzajemne analizowanie kodu- detekcja potencjalnych problemów- poznawanie ciekawych rozwiązań
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
Retrospektywy
Wyciągajmy wnioski i usprawniajmy - po każdy sprincie analiza “jak poszło”- detekcja problemów i propozycje rozwiązań
“Na ogół sprawa nie rozbija się o wpadki, o których tak lubią mówić różni spece, lecz o złe wykonanie. Proste jak drut: nie wystarczy wymyślić co i jak, trzeba jeszcze to zrobić, a raczej dopilnować, żeby inni zrobili”
Ram Charan (“Fortune”, 1999)
@TomaszBorowski
tomaszborowski.com
Dziękuję za uwagę