From Simple to Complex Powering websites, APIs and isomorphic web applications Alexandra Anghel, CTO Appticles.com
Jul 12, 2015
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