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
Tweet

More Decks by Henrique Vicente

Other Decks in Programming

Transcript

  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 =

    require(‘express-validator’);
 // 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 &

    Socket.IO
  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