mean stack javacro 2014

39
MEAN Stack Kako i kada? Nenad Pećanac Serengeti

Upload: nenad-pecanac

Post on 22-Jun-2015

389 views

Category:

Technology


4 download

DESCRIPTION

MEAN Stack overview

TRANSCRIPT

Page 1: Mean Stack JavaCro 2014

MEAN Stack Kako i kada?

Nenad PećanacSerengeti

Page 2: Mean Stack JavaCro 2014

Sadržaj

1) O MEAN-u

2) Mongo DB

3) Node.JS & Express

4) Angular

5) Kada koristiti MEAN?

6) Kada ne koristiti MEAN?

7) Mean.IO & Mean JS

8) Reference

Page 3: Mean Stack JavaCro 2014

1) O MEAN-u

Page 4: Mean Stack JavaCro 2014

MEAN

MEAN je Full stack JS framework - potpuni razvojni okvir

za izradu modernih web stranica i aplikacija.

Sastoji se od 4 tehnologije:

Mongo DB, Express, Angular i Node.JS.

Naziv je 2013. godine smislio Valeri Karpov, član

razvojnog tima Mongo DB-a.

MEAN omogućava ubrzan razvoj JavaScript aplikacija.

Page 5: Mean Stack JavaCro 2014

MEAN

MEAN je pogodan za brzu izradu prototipova aplikacija.

JS se koristi na serverskoj i klijentskoj strani,

podaci u bazi zapisani su u JSON formatu.

Unaprijed konfigurirani projekti dostupni su

za preuzimanje na

MEAN.JS i MEAN.IO stranicama.

Yeoman – alat za generiranje predložaka

za razvoj internetskih aplikacija.

Page 6: Mean Stack JavaCro 2014

2) Mongo DB

Page 7: Mean Stack JavaCro 2014

Mongo DB

Mongo DB – najraširenija NoSQL baza podataka.

Podaci se zapisuju u binarnom JSON formatu – BSON.

BSON - efikasan format za spremanje i pretraživanje podataka.

Page 8: Mean Stack JavaCro 2014

Mongo DB

Svaki podatak u bazi zapisan je kao Dokument:

Dokumenti se spremaju u Kolekcije.

Kolekcije imaju funkciju kao tablice u relacijskim bazama.

Kolekcije omogućavaju fleksibilniji podatkovni model.

Page 9: Mean Stack JavaCro 2014

Mongo DB

Kolekcije nemaju kolone kao tablice, ne definiraju stroge

hijerarhijske odnose među podacima.

Podatkovni model moguće je realizirati ugrađivanjem

ili referenciranjem podataka.

Podatkovni modeli koji koriste ugrađivanje

- denormalizirani, omogućavaju brže čitanje.

Podatkovni modeli koji koriste referenciranje

- normalizirani, koriste se za izgradnju hijerarhije.

Page 10: Mean Stack JavaCro 2014

Mongo DB

Ugrađivanje podataka:

Page 11: Mean Stack JavaCro 2014

Mongo DB

Referenciranje podataka:

Page 12: Mean Stack JavaCro 2014

Mongo DB

Nad kolekcijama se grade indeksi i vrše upiti:

Page 13: Mean Stack JavaCro 2014

Mongo DB

Operacije za agregiranje/sortiranje koriste Map/Reduce

algoritme, čime se postižu visoke performanse.

Mongo DB ima ugrađenu podršku za klastering,

replikaciju, backup, monitoring i HA.

Mongo DB usluge dostupne su u cloudu:

Amazon, IBM, Red Heat, VMWare, MongoLab ...

NoSQL baza nije primjerena kod programskih rješenja

koja zahtjevaju strogu hijerarhiju

i kontrolu nad podacima.

U MEAN-u ju je npr. moguće zamijeniti sa MySQL-om.

Page 14: Mean Stack JavaCro 2014

3) Node.JS & Express

Page 15: Mean Stack JavaCro 2014

Node JS

Node.JS je platforma za izradu brzih i skalabilnih mrežnih

aplikacija, izgrađena na Chrome-ovom JS V8 runtime-u.

Node.JS je platforma za server-side JS.

Sadrži asinhrone biblioteke za upravljanje datotekama,

soketima, te za HTTP komunikaciju.

Node.JS koristi efikasan, neblokirajući I/O model obrade podataka.

Prikladan je za brzu razmjenu velike količine podataka

i izradu aplikacija za rad u realnom vremenu,

distribuiranih na različitim uređajima.

Page 16: Mean Stack JavaCro 2014

Node JS

Node.JS izgrađen je kao platforma, koja se sastoji od raznih

modula, koji implementiraju određene funkcionalnosti.

Npr. za obradu HTTP zahtjeva, potrebno je koristiti HTTP modul:

var http = require('http');

NPM (Node package manager ) je Node-ov upravljač

modulima, koristi se iz komandne linije.

Instaliranje novog modula:

npm install module_name

Page 17: Mean Stack JavaCro 2014

Node JS

Primjer >Node.JS HTTP server:

// file: http.js:

var http = require("http");

http.createServer(function (request, response) {

request.on("end", function () {

response.writeHead( 200, { 'Content-Type': 'text/plain' });

response.end('Hello HTTP!');

});

}).listen(8080);

// exec: node http.js

Page 18: Mean Stack JavaCro 2014

Express

Express je minimalističan, brz i efikasan razvojni okvir za izradu

internet aplikacija na Node.JS-u.

Express podržava sve potrebne funkcionalnosti za izradu

single-page, multi-page ili hibridnih web aplikacija.

Također implementira dodatne funkcionalnosti za:

• korištenje ostalih protokola pored HTTP-a

• za autentifikaciju korisnika

• upravljanje greškama

• parsiranje POST zahtjeva

...

Page 19: Mean Stack JavaCro 2014

Express

Primjer >Node.JS + Express HTTP server:

var express = require('express');

var app = express();

app.get('/helloworld', function(req, res){

res.send('Hello World');

});

var server = app.listen(3000, function() {

console.log('Listening on port %d', server.address().port);

});

Page 20: Mean Stack JavaCro 2014

Node JS - performanse

Trajanje operacija na serveru:

Page 21: Mean Stack JavaCro 2014

Node JS - performanse

Mrežne operacije traju višestruko duže od svih ostalih.

Razlog tome je čekanje na izvršavanje I/O operacija na serveru.

Node.JS obrađuje I/O operacije asinkrono, korištenjem

internog thread-poola ili asinkronih I/O API-ja OS-a.

Page 22: Mean Stack JavaCro 2014

Node JS - performanse

Node.JS ima najbolje performanse kad obrada zahtjeva ne uključuje CPU intenzivne operacije.

Page 23: Mean Stack JavaCro 2014

4) Angular

Page 24: Mean Stack JavaCro 2014

Angular

Google-ov JS MVC framework za razvoj SPA aplikacija.

Angular je zasnovan na pretpostavci da prikaz podataka treba

biti izražen deklarativno, a poslovna logika imperativno.

Angular dorađuje statitčki HTML dodavanjem dinamičkih

atributa i sintakse za predloške, kojima se omogućava

preslikavanje modela podataka na sučelje aplikacije.

Ciljevi:

• Razdvajanje serverskog i klijentskog koda.

• Razdvajanje koda za manipulaciju DOM-om od koda

za upravljanje poslovnom logikom

• Poboljšavanje podrške za testiranje – Karma, Protractor

Page 25: Mean Stack JavaCro 2014

Angular

Preslikavanje je dvosmjerno, sinkronizacija se odvija automatski.

Komunikacija sa serverom odvija se pozadinski Ajax-om,

podaci se prenose u JSON formatu.

Page 26: Mean Stack JavaCro 2014

Angular

https://angularjs.org/

<html ng-app>

<head><script src=“angular.js"></script></head>

<body>

<div>

<label>Name:</label>

<input type="text" ng-model="yourName"

placeholder="Enter a name here">

<h1>Hello {{yourName}}!</h1>

</div>

</body>

</html>

Page 27: Mean Stack JavaCro 2014

Angular

http://tutorialzine.com/2013/08/learn-angularjs-5-examples/

Page 28: Mean Stack JavaCro 2014

Angular

<form ng-app ng-controller="OrderFormController">

<h1>Services</h1>

<ul><li ng-repeat="service in services"

ng-click="toggleActive(service)"

ng-class="{active:service.active}"> {{service.name}}

<span>{{service.price | currency}}</span>

</li></ul>

<div class="total">Total:

<span>{{total() | currency}}</span>

</div>

</form>

Page 29: Mean Stack JavaCro 2014

5) Kada koristiti MEAN?

Page 30: Mean Stack JavaCro 2014

Kada koristiti MEAN?

Prilikom izrade prototipova aplikacija.

Ukoliko se koristi u produkciji, potrebno je ukloniti

CPU-intenzivne operacije iz Event-Loopa

i veliku pažnju posvetiti obradi grešaka,

koja ukoliko je neispravno implementirana može

srušiti server.

Za izradu višekorisničkih, real-time aplikacija kao npr. CHAT.

Za izradu CRUD aplikacija, npr. BLOG.

Za izradu Data-streaming aplikacija.

Za izradu Proxy-a.

Page 31: Mean Stack JavaCro 2014

6) Kada ne koristiti MEAN?

Page 32: Mean Stack JavaCro 2014

Kada ne koristiti MEAN?

Za izradu enterprise aplikacija.

Kada su potrebne transakcijske servisne operacije.

Kada je potrebno obavljati CPU-intenzive operacije na serveru.

Kad se zahtjeva stroga relacijska hijerarhija nad modelom

podataka (može se, ali vjerojatno nije dobra ideja).

Node.JS je “mlada” tehnologija, trenutna verzija je 0.10.26.

Mnoga rješenja koja su u drugim tehnologijama standarna

još nisu podržana na Node-u.

Page 33: Mean Stack JavaCro 2014

7) MEAN.IO & MEAN.JS

Page 34: Mean Stack JavaCro 2014

MEAN.IO

Page 35: Mean Stack JavaCro 2014

MEAN.JS

Page 36: Mean Stack JavaCro 2014

MEAN.JS

Instalacija:

• MongoDB

• Node + NPM

• Git

Postavljanje osnovnog projekta:

• Download Zip arhive projekta

• Kloniranje GitHub projekta

• Yeoman generatori

Page 37: Mean Stack JavaCro 2014

Yeoman

Generiranje projekta iz komandne linije:

$ npm install -g yo

$ npm install -g generator-meanjs

$ yo meanjs

$ grunt

Generator:

• Skripta za preuzimanje koda i konfiguriranje projekta

• Interakcija s korisnikom

• Prema korisnikovim uputama se konfigurira projekt

• Npr. MeanJS generator nudi opciju instaliranja

osnovnog CRUD modula

Page 38: Mean Stack JavaCro 2014

8) Reference

Page 39: Mean Stack JavaCro 2014

Reference

MEAN.IO: http://www.mean.io/

MEAN.JS: http://meanjs.org/

MONGO DB: http://www.mongodb.org/

NODE JS: http://nodejs.org/

EXPRESS: http://expressjs.com/

ANGULAR: https://angularjs.org/

YEOMAN.IO: http://yeoman.io/

SCOTCH.IO: http://scotch.io/