From Simple to ComplexPowering websites, APIs and isomorphic web applications

Alexandra Anghel, CTO Appticles.com

• V8 JavaScript engine

• Procesare asincrona, mai eficienta

vs. “un thread per request”

intro

I

Cum facem un website cu NodeJS?

I

I

• Fara baza de date & autentificare

• Mecanism pentru rutare

• Jade, Handlebars, Hogan, etc.

• V4+: fara middleware in afara de express:static

I

middleware

routing

dev/production

I

Template-ul principal: views/layout.jadeI

I Cum facem un formular de contact?

I

Template-ul formularului: views/contact.jade (1)

I

Template-ul formularului: views/contact.jade (2)

I Ruta ce incarca formularul: routes/index.js

I

$ npm install nodemailer

app.js

I Trimite mesajul: routes/ajax.js (1)

I

Trimite mesajul: routes/ajax.js (2)

II

Cum facem un API cu NodeJS?

• Verbe HTTP (GET, POST, PUT, DELETE)

II

• Conectarea cu o baza de date

• next()

• URL rewriting (api/users; api/user/:id)

Mongoose: npm install mongoose

II

MongoSkin, Mongolia, Mongojs, MongoSmash

+

IIStructura API-ului

II

Conectarea la baza de date: app.js

II

Modelul: models/user.js

IIRute afisare si adaugare: routes/users.js (1)

IIRute modificare si stergere: routes/users.js (2)

Middleware pentru toate request-urile: routes/index.js

II

Afisare lista de utilizatori: routes/users.js

II

Adaugare utilizator: routes/users.js

II

II Adaugare utilizator (POSTMAN)

III

Aplicatii izomorfice

III

Modelul clasic client/server

Client

(Browser)

Ruby

Python

Java

PHP

Server

request HTMLdate

III

• SEO

• Viteza de incarcare / performanta

http://googlewebmastercentral.blogspot.ro/2014/05/understanding-web-pages-better.html

Aplicatii single-page - Probleme

III

Client + Server (aplicatie izomorfica)

Client

(Browser)

Server

(Node JS)

Aplicatie sync

III

Meteor is a complete open source

platform for building web and mobile

apps in pure JavaScript.

III

• Template-uri

• Pachete

• Structura aplicatiei

• Baza de date

III

meteor search [name]

meteor add [name]

meteor list

…

Propriul manager de pachete

IIICautare pachete Meteor

III

III

III Structura unei aplicatii

• /server

• /.meteor

• /client (templates, CSS)

• /public (imagini, alte fisiere statice)

• Fisiere comune server & client

III

• Inclusions: insereaza un alt template

{{> nav}}

• Expressions

{{pageTitle}}

• Block helpers

#each, #if, #each, #with, #unless

Spacebars

III

meteor

meteor mongo

+

III

Client

• MiniMongo

• Subset al bazei de date reale

Server

• API pentru MongoDB

III

Exemplu: Lista de comentarii

Titlu

…

Titlu

…

Titlu

…

IIIView-ul principal: client/main.html

III Template pentru lista de comentarii: client/comments/list.html

Template pentru un comentariu: client/comments/item.html

III Afiseaza comentarii in lista: client/comments/list.js

IIIAplicatia este actualizata in browser fara refresh

III

III

Legatura cu baza de date: lib/collections/comments.js

III

Adauga element in baza de date din consola browserului

III

Afiseaza comentarii adaugate din consola MongoDB

III meteor remove insecure

meteor remove autopublish

Server, filtreaza comentarii afisate: server/publications.js

Client, legatura cu baza de date: client/main.js

III

Client, afiseaza comentarii: client/comments/list.js

III http://docs.meteor.com/#/full

Multumesc!

Alexandra Anghel

alexandra@appticles.com