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

Node.js Role in Frontend Development

Node.js Role in Frontend Development

Julián Duque

July 14, 2016
Tweet

More Decks by Julián Duque

Other Decks in Programming

Transcript

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

    - Community Organizer @julian_duque / github.com/julianduque
  2. © 2016 NodeSource What is Node.js? 4 Node.js is a

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

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

    npm, is the largest ecosystem of open source libraries in the world
  5. © 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
  6. © 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!
  7. © 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
  8. © 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
  9. © 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
  10. © 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
  11. © 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
  12. © 2016 NodeSource npm 24 npm is package manager for

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

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

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

    minify • imagemin • js-beautify • watch • livereload
  16. © 2016 NodeSource npm 30 Testing Tools • mocha •

    chai • sinon • karma • jasmine
  17. © 2016 NodeSource Task Runners 32 • Grunt - http://gruntjs.com

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

    going to do some live coding… again”
  19. © 2016 NodeSource Backend for Frontend (BFF) 36 Main Uses

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

    Rendering • reactjs/express-react-views • ember-cli-fastboot • airbnb/hypernova • build your own (?)