Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Node.js Role in Frontend Development

Node.js Role in Frontend Development

C2d1139b787a469e13229070d6be918c?s=128

Julián Duque

July 14, 2016
Tweet

More Decks by Julián Duque

Other Decks in Programming

Transcript

  1. July 14, 2016 Node.js Introduction and Role in Frontend Development

  2. July 14, 2016 Julián Duque Support Manager - Node.js Collaborator

    - Community Organizer @julian_duque / github.com/julianduque
  3. © 2016 NodeSource 3

  4. © 2016 NodeSource What is Node.js? 4 Node.js is a

    JavaScript Runtime built on Chrome’s V8 engine
  5. © 2016 NodeSource What is Node.js? 5 Node.js uses an

    event-driven, non-blocking I/O model that makes it lightweight and efficient
  6. © 2016 NodeSource What is Node.js? 6 Node.js package ecosystem,

    npm, is the largest ecosystem of open source libraries in the world
  7. © 2016 NodeSource What is Node.js? 7 Node.js is not

    a language
  8. © 2016 NodeSource What is Node.js? 8 Node.js is not

    a framework
  9. © 2016 NodeSource What is Node.js? 9 Who is using

    Node.js?
  10. © 2016 NodeSource What is Node.js? 10 and many more…

  11. © 2016 NodeSource What is Node.js? 11 Why Node.js?

  12. © 2016 NodeSource What is Node.js? 12 Memory vs I/O

    I/O is Expensive!
  13. © 2016 NodeSource What is Node.js? 13 Blocking vs Non-Blocking

    console.log('Fetching article...') var result = query("SELECT * FROM articles WHERE id = 1") console.log('Here is the result:', result) On typical programming platforms, performing I/O is a blocking operation
  14. © 2016 NodeSource What is Node.js? 14 Waiting for I/O

    is a Waste While waiting for I/O, your program is unable to do any other work This is a huge waste of resources!
  15. © 2016 NodeSource What is Node.js? 15 I/O is usually

    hidden System.out.println("Reading file..."); BufferedReader br = new BufferedReader(new FileReader("in.txt")); try { StringBuilder sb = new StringBuilder(); String line; while ((line = br.readLine()) != null) sb.append(line + "\n"); System.out.print(sb.toString()); } finally { br.close(); } System.out.println("Finished reading file!"); On typical programming platforms, I/O operations are obscured amongst non-I/O operations
  16. © 2016 NodeSource What is Node.js? 16 Treat I/O as

    a Special Case Performing I/O is not the same as executing business logic We should not treat them the same
  17. © 2016 NodeSource What is Node.js? 17 Event-Driven, Non-Blocking Programming

  18. © 2016 NodeSource What is Node.js? 18 function handleResult(result) {

    console.log('Here is the result:', result) } select('SELECT * FROM articles WHERE id = 1', handleResult) console.log('Fetching article...') Don’t block on I/O Continue executing code Listen for an event (result is ready) When the event is triggered, perform operations on the result
  19. © 2016 NodeSource What is Node.js? 19 “For my presentation

    today, I’m going to do some live coding” http://nodejsreactions.tumblr.com/post/68275292840/for-my-presentation-today-im-going-to-do-some
  20. © 2016 NodeSource What is Node.js? 20 Node.js Philosophy

  21. © 2016 NodeSource What is Node.js? 21 Node.js is Minimal

    Instead of providing a big framework, Node.js provides the minimum viable library for doing I/O All the rest is built on top of this in user-land This allows Node.js core to evolve independently
  22. © 2016 NodeSource What is Node.js? 22 Small Core, Vibrant

    Ecosystem
  23. © 2016 NodeSource 23

  24. © 2016 NodeSource npm 24 npm is package manager for

    JavaScript and represents the vibrant ecosystem (userland)
  25. © 2016 NodeSource npm 25 A lot of front-end tools

    and libraries can be found in npm
  26. © 2016 NodeSource npm 26 Popular Libraries • jquery •

    bootstrap • handlebars • react • angular / angular2 • ember-cli
  27. © 2016 NodeSource npm 27 Popular Tools • uglify-js •

    minify • imagemin • js-beautify • watch • livereload
  28. © 2016 NodeSource npm 28 Power Tools • browserify •

    babel
  29. © 2016 NodeSource npm 29 CSS • less • cssnext

    • node-sass • postcss
  30. © 2016 NodeSource npm 30 Testing Tools • mocha •

    chai • sinon • karma • jasmine
  31. © 2016 NodeSource Task Runners 31

  32. © 2016 NodeSource Task Runners 32 • Grunt - http://gruntjs.com

    (Configuration) • Gulp - http://gulpjs.com (Programming using Streams) • webpack - https://webpack.github.io (Configuration)
  33. © 2016 NodeSource npm 33 “For my presentation today, I’m

    going to do some live coding… again”
  34. © 2016 NodeSource Backend for Frontend 34

  35. © 2016 NodeSource Backend for Frontend (BFF) 35

  36. © 2016 NodeSource Backend for Frontend (BFF) 36 Main Uses

    • Server Side Rendering • Public API Layer • Realtime Services
  37. © 2016 NodeSource Backend for Frontend (BFF) 37 Server Side

    Rendering • reactjs/express-react-views • ember-cli-fastboot • airbnb/hypernova • build your own (?)
  38. Thank you. Julián Duque julian@nodesource.com @julian_duque