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

JavaScript beyond the browser

JavaScript beyond the browser

Henrique Vicente

November 09, 2013

More Decks by Henrique Vicente

Other Decks in Programming


  1. JavaScript beyond the browser Henrique Vicente http://henvic.github.io/

  2. JavaScript • Created by Brendan Eich • First public appearance

    on the betas of Netscape Navigator 2.0
  3. ECMAScript • “JS standardization / formalization” • ECMA-262, ISO/IEC 16262

    • Gave origin to [other] new implementations such as ActionScript, QML, QtScript, …
  4. Why JS on the browser? • How else would you

    offer a better experience for applications such as web mail? • More portable • Everywhere • Fast (and getting faster) • Simplicity
  5. Alternatives on the browser • Less performance • No broad

    support • Not as simple • ???
  6. And why JavaScript beyond the browser? 1. Code re-use /

    avoid duplicity 2. Using your JS know-how to attack even more problems 3. JavaScript is ubiquitous and everybody uses it 4. Why not?
  7. Web application with JS both on the client-side as well

    as on the server-side • Share data validations code:
 Less inconsistencies
 Just-in-time feedback to the end-user
 Still have safe verification on the server-side * * Thou shalt never trust the user https://www.owasp.org/index.php/Don't_trust_user_input
  8. JS runtimes • Google V8 (Chrome) • SpiderMonkey (Firefox) •

    WebKit (Safari) • Trident (IE) • Rhino • Wakanda • …
  9. JS beyond the browser • Web apps for Chrome, Firefox

    * • Apache Cordova / PhoneGap • PhantomJS • SlimerJS • CasperJS • MongoDB (the map / reduce functions) • Node.js * as extensions / app, instead of common web sites
  10. Web apps for Chrome, Firefox • On the browser •

    But with access to APIs restricted to regular web pages • Apps installed as extensions, not just regular web pages
  11. • Mobile framework for developing using a web stack (HTML,

    JS, CSS) • Lets you develop a single system for different mobile platforms (i.e., Android, iOS, Windows Phone…)
  12. None
  13. • JavaScript programmable web stacks • PhantomJS: headless, WebKit-based •

    SlimerJS: Gecko-based • Use cases:
 web crawler, functional tests, monitoring, bots
  14. Examples • Scripts from my“Tests and automation with PhantomJS and

    CasperJS” talk
 https://speakerdeck.com/henvic/tests-and- automation-with-phantomjs-and-casperjS
 https://github.com/henvic/phantom-casper- simple-talk
  15. None
  16. Example: very simple functional tests with Wordpress e CasperJS https://github.com/henvic/phantom-casper-simple-talk/blob/master/wordpress.js

  17. None
  18. Node.js • Great community, growing fast • Excellent for CLI

    tools, prototyping, and… • Taking some room from Apache + PHP, Python, Ruby, etc, as a serious web application stack • non-blocking I/O, single-threaded event loop
 this can make your brain blow if you’re not used to concurrency… (event-driven programming)
  19. npm ~ Node’s apt-get

  20. npmjs.org • Anyone can publish a npm package by just

    preparing it and invoking “npm publish” • Many great package available • Be aware of what code you run due to security
  21. npm ~ Node’s apt-get • npm_modules - npm modules directory

    • There are local and global modules • Each module has its own dependencies (other modules) installed inside their own npm_modules
  22. Adding a module to your program • var expressValidator =

 // Includes the express-validator module, available on npm
 Install it locally with
 npm install express-validator
 You shall install it locally.
  23. What should be installed globally? • Tools like Cordova, grunt-cli,

    bower, services… • npm install -g <package> or
 npm install <package> -g
  24. Real world example: Creating a chat prototype for a corporate

    social network I used socket.io for this, but would try Faye with its Bayeux protocol if I knew it by the time I built it.
  25. Chat final implementation running on production, also with Node.js &

  26. Serving static files 1. Node.JS doesn’t provide an official way

    to do this. 2. Install a module that does so, like node-static
 > npm install node-static
 then, write a simple program to do the job:
  27. Compute n! with Node.JS

  28. package.json • To publish a Node package you need to

    write this document • Even if you don’t intend to publish a npm package, create a package.json document to take advantage of a series of things like dependency management, etc
  29. package.json

  30. Some fantastic tools built with Node.js

  31. Slides available on https://speakerdeck.com/henvic/javascript-beyond-the- browser