Produkcja aplikacji internetowych

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! ;)


Jest duże zapotrzebowanie - mogę na tym zarobić!


Cały czas się zmieniają technologie,a ja mogę uczyć się nowych rzeczy!


Mogę poznać inspirujących ludzi i razem tworzyć open source’owe rozwiązania!


Wszystko zmierza do internetu...

Cechy dobrego web developera


Wszechstronność umiejętności

admin. serwera

kodowanie server-side

kodowanie client-side

stylowanie + ux

Full Stack Developer


Wszechstronność komunikacja

z współpracownikami

z klientem

pisemna i głosowa

ciągła i elastyczna

obsługa przypadków brzegowych


Profesjonalizm jakość rozwiązania

stabilność

intuicyjność

krótkie, zrozumiałe metody oraz klasy


Profesjonalizm jakość kodu

brak nadmiarowego kodu

testy automatyczne


Otwartość

dystans do swego kodu

chęć otrzymania konstruktywnej krytyki

chęć dawania konstruktywnej krytyki


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

https://github.com/showcases/front-end-javascript-frameworks

https://github.com/showcases/front-end-javascript-frameworks

https://github.com/showcases/css-libraries

https://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

http://mikstura.it/

https://github.com/miksturait/ototeam

https://github.com/miksturait/ototeam

http://ototeam-mikstura.herokuapp.com

http://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ę

Produkcja aplikacji internetowych

Technology

Transcript of Produkcja aplikacji internetowych