JavaScript beyond the browser

Slides in Portuguese: https://speakerdeck.com/henvic/javascript-alem-do-navegador

Transcript

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

   View Slide

2. JavaScript
   • Created by Brendan Eich
   • First public appearance on the betas of
   Netscape Navigator 2.0
   

   View Slide

3. ECMAScript
   • “JS standardization / formalization”
   • ECMA-262, ISO/IEC 16262
   • Gave origin to [other] new implementations such
   as ActionScript, QML, QtScript, …
   

   View Slide

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
   

   View Slide

5. Alternatives on the browser
   • Less performance
   • No broad support
   • Not as simple
   • ???
   

   View Slide

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?
   

   View Slide

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
   

   View Slide

8. JS runtimes
   • Google V8 (Chrome)
   • SpiderMonkey (Firefox)
   • WebKit (Safari)
   • Trident (IE)
   • Rhino
   • Wakanda
   • …
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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…)
    

    View Slide

12. View Slide

13. • JavaScript programmable web stacks
    • PhantomJS: headless, WebKit-based
    • SlimerJS: Gecko-based
    • Use cases:

    web crawler, functional tests, monitoring, bots
    

    View Slide

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
    

    View Slide

15. View Slide

16. Example: very simple functional
    tests with Wordpress e CasperJS
    https://github.com/henvic/phantom-casper-simple-talk/blob/master/wordpress.js
    

    View Slide

17. View Slide

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)
    

    View Slide

19. npm ~ Node’s apt-get
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

23. What should be installed
    globally?
    • Tools like Cordova, grunt-cli, bower, services…
    • npm install -g or

    npm install -g
    

    View Slide

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.
    

    View Slide

25. Chat final implementation running on
    production, also with Node.js & Socket.IO
    

    View Slide

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:
    

    View Slide

27. Compute n! with Node.JS
    

    View Slide

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
    

    View Slide

29. package.json
    

    View Slide

30. Some fantastic tools built
    with Node.js
    

    View Slide

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

    View Slide