Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
From Simple to Complex
Powering 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 afa...
middleware
routing
dev/production
I
Template-ul principal: views/layout.jade
I
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
+
II
Structura API-ului
II
Conectarea la baza de date: app.js
II
Modelul: models/user.js
II
Rute afisare si adaugare: routes/users.js (1)
II
Rute 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-be...
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
III
Cautare pachete Meteor
III
III
III Structura unei aplicatii
• /server
• /.meteor
• /client (templates, CSS)
• /public (imagini, alte fisiere statice)
• F...
III
• Inclusions: insereaza un alt template
{{> nav}}
• Expressions
{{pageTitle}}
• Block helpers
#each, #if, #each, #with...
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
…
III
View-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
III Aplicatia 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, ...
III
Client, afiseaza comentarii: client/comments/list.js
III http://docs.meteor.com/#/full
Multumesc!
Alexandra Anghel
alexandra@appticles.com
Upcoming SlideShare
Loading in …5
×

Node.js, From Simple to Complex

1,512 views

Published on

Node.js - Powering websites, APIs and isomorphic web applications

Published in: Software
  • Be the first to comment

Node.js, From Simple to Complex

  1. 1. From Simple to Complex Powering websites, APIs and isomorphic web applications Alexandra Anghel, CTO Appticles.com
  2. 2. • V8 JavaScript engine • Procesare asincrona, mai eficienta vs. “un thread per request” intro
  3. 3. I Cum facem un website cu NodeJS?
  4. 4. I
  5. 5. I
  6. 6. • Fara baza de date & autentificare • Mecanism pentru rutare • Jade, Handlebars, Hogan, etc. • V4+: fara middleware in afara de express:static I
  7. 7. middleware routing dev/production I
  8. 8. Template-ul principal: views/layout.jade I
  9. 9. I Cum facem un formular de contact?
  10. 10. I Template-ul formularului: views/contact.jade (1)
  11. 11. I Template-ul formularului: views/contact.jade (2)
  12. 12. I Ruta ce incarca formularul: routes/index.js
  13. 13. I $ npm install nodemailer app.js
  14. 14. I Trimite mesajul: routes/ajax.js (1)
  15. 15. I Trimite mesajul: routes/ajax.js (2)
  16. 16. II Cum facem un API cu NodeJS?
  17. 17. • Verbe HTTP (GET, POST, PUT, DELETE) II • Conectarea cu o baza de date • next() • URL rewriting (api/users; api/user/:id)
  18. 18. Mongoose: npm install mongoose II MongoSkin, Mongolia, Mongojs, MongoSmash +
  19. 19. II Structura API-ului
  20. 20. II Conectarea la baza de date: app.js
  21. 21. II Modelul: models/user.js
  22. 22. II Rute afisare si adaugare: routes/users.js (1)
  23. 23. II Rute modificare si stergere: routes/users.js (2)
  24. 24. Middleware pentru toate request-urile: routes/index.js II
  25. 25. Afisare lista de utilizatori: routes/users.js II
  26. 26. Adaugare utilizator: routes/users.js II
  27. 27. II Adaugare utilizator (POSTMAN)
  28. 28. III Aplicatii izomorfice
  29. 29. III Modelul clasic client/server Client (Browser) Ruby Python Java PHP Server request HTMLdate
  30. 30. III • SEO • Viteza de incarcare / performanta http://googlewebmastercentral.blogspot.ro/2014/05/understanding-web-pages-better.html Aplicatii single-page - Probleme
  31. 31. III Client + Server (aplicatie izomorfica) Client (Browser) Server (Node JS) Aplicatie sync
  32. 32. III Meteor is a complete open source platform for building web and mobile apps in pure JavaScript.
  33. 33. III • Template-uri • Pachete • Structura aplicatiei • Baza de date
  34. 34. III meteor search [name] meteor add [name] meteor list … Propriul manager de pachete
  35. 35. III Cautare pachete Meteor
  36. 36. III
  37. 37. III
  38. 38. III Structura unei aplicatii • /server • /.meteor • /client (templates, CSS) • /public (imagini, alte fisiere statice) • Fisiere comune server & client
  39. 39. III • Inclusions: insereaza un alt template {{> nav}} • Expressions {{pageTitle}} • Block helpers #each, #if, #each, #with, #unless Spacebars
  40. 40. III meteor meteor mongo +
  41. 41. III Client • MiniMongo • Subset al bazei de date reale Server • API pentru MongoDB
  42. 42. III Exemplu: Lista de comentarii Titlu … Titlu … Titlu …
  43. 43. III View-ul principal: client/main.html
  44. 44. III Template pentru lista de comentarii: client/comments/list.html Template pentru un comentariu: client/comments/item.html
  45. 45. III Afiseaza comentarii in lista: client/comments/list.js
  46. 46. III Aplicatia este actualizata in browser fara refresh
  47. 47. III
  48. 48. III Legatura cu baza de date: lib/collections/comments.js
  49. 49. III Adauga element in baza de date din consola browserului
  50. 50. III Afiseaza comentarii adaugate din consola MongoDB
  51. 51. III meteor remove insecure meteor remove autopublish Server, filtreaza comentarii afisate: server/publications.js Client, legatura cu baza de date: client/main.js
  52. 52. III Client, afiseaza comentarii: client/comments/list.js
  53. 53. III http://docs.meteor.com/#/full
  54. 54. Multumesc! Alexandra Anghel alexandra@appticles.com

×