• JavaScript and it’s pervasiveness

  • What’s the purpose?

    • Exploration of the changing landscape of web applications, mobile applications and the ubiquity of JavaScript
  • What will it cover?

    • “Thin” clients
      • A single-page app who’s data processing is handled entirely by a backend server
    • An example web application built on HTML5 web technologies
    • Professional examples
    • Popular JavaScript libraries and frameworks
      • Angular
      • NodeJS
    • The future: Web components
      • HTML5 components
  • Slide 1 | Intro

    • Webmaker logo
    • Title
  • Slide 2 | Overview

    • The Web as a Platform
      • How shared tech makes the browser common ground
    • Webmaker’s Thin-client paradigm
      • Leveraging JavaScript on the server and the client
    • Front-end HTML5, CSS3, JavaScript applications with AngularJS
    • Back-end servers with JavaScript & NodeJS
  • Section 1: The web as a platform

    • Shared technologies are now ubiquitous across major browsers
      • CSS3, HTML5, JavaScript
      • Native rendering of images, audio, video, 2d and 3d graphics
        • <audio> tag
        • <video> tag
        • <canvas> tag, with WebGL
      • Advanced UX with CSS3
        • Rounded corners, shadows, gradients, tranistions, animations
      • Standard JavaScript libraries and functionality
        • WebWorkers
  • Section 2: Our web-based thin-client paradigm

    • A new approach to designing apps using HTML5/CSS3/JavaScript
      • The “thin-client” is the front-end, user facing UX. All UX processing is done in the thin-client, with (usually) a REST api to a back-end server for any data persistence/computation/access
      • Front-end is usually using an MVC framework, like Angular.js
      • The back-end uses Nodejs for easy manipulation of common data types (JSON blobs, JavaScript objects) and libraries.
  • Section 4: NodeJS in action

    • Based on Google’s V8 JavaScript run-time engine
    • Pure JavaScript, with a robust core library for server operations
    • A thriving package directory with modules for almost any situation.
    • A number of frameworks, like Express.js, for easy web app development
  • Section 5: Conclusion

    • Web apps written in HTML5, CSS3 and JavaScript are becoming powerful enough to be used on mobile devices and desktop computers - sometimes with the same code
    • Webmaker is pushing the use of this tech forward
    • Questions?
{"cards":[{"_id":"467b36e8b2cb02af9900003a","treeId":"467b36d9b2cb02af99000038","seq":356874,"position":1,"parentId":null,"content":"# JavaScript and it's pervasiveness\n"},{"_id":"467b3847b2cb02af9900003c","treeId":"467b36d9b2cb02af99000038","seq":356687,"position":1,"parentId":"467b36e8b2cb02af9900003a","content":"## What's the purpose?\n* Exploration of the changing landscape of web applications, mobile applications and the ubiquity of JavaScript"},{"_id":"467b3986b2cb02af9900003d","treeId":"467b36d9b2cb02af99000038","seq":356712,"position":2,"parentId":"467b36e8b2cb02af9900003a","content":"## What will it cover?\n* \"Thin\" clients\n * A single-page app who's data processing is handled entirely by a backend server\n* An example web application built on HTML5 web technologies\n* Professional examples\n * Webmaker (https://webmaker.org/gallery)\n * Design a mini (http://www.mini.co.uk/design-your-mini)\n* Popular JavaScript libraries and frameworks \n * Angular\n * NodeJS\n* The future: Web components\n * HTML5 components"},{"_id":"467d1ad472efb0628400001c","treeId":"467b36d9b2cb02af99000038","seq":357973,"position":1,"parentId":"467b3986b2cb02af9900003d","content":"### Slide 1 | Intro\n* Webmaker logo\n* Title"},{"_id":"467d312672efb0628400001d","treeId":"467b36d9b2cb02af99000038","seq":358213,"position":2,"parentId":"467b3986b2cb02af9900003d","content":"### Slide 2 | Overview\n* The Web as a Platform\n * How shared tech makes the browser common ground\n* Webmaker's Thin-client paradigm\n * Leveraging JavaScript on the server and the client\n* Front-end HTML5, CSS3, JavaScript applications with AngularJS\n* Back-end servers with JavaScript & NodeJS"},{"_id":"467d364772efb0628400001f","treeId":"467b36d9b2cb02af99000038","seq":358003,"position":3,"parentId":"467b3986b2cb02af9900003d","content":"### Section 1: The web as a platform\n* Shared technologies are now ubiquitous across major browsers\n * CSS3, HTML5, JavaScript\n * Native rendering of images, audio, video, 2d and 3d graphics\n * `<audio>` tag\n * `<video>` tag\n * `<canvas>` tag, with WebGL\n * Advanced UX with CSS3\n * Rounded corners, shadows, gradients, tranistions, animations\n * Standard JavaScript libraries and functionality\n * WebWorkers\n * ...\n\n"},{"_id":"467d49cf72efb06284000020","treeId":"467b36d9b2cb02af99000038","seq":358011,"position":4,"parentId":"467b3986b2cb02af9900003d","content":"### Section 2: Our web-based thin-client paradigm\n* A new approach to designing apps using HTML5/CSS3/JavaScript \n * The \"thin-client\" is the front-end, user facing UX. All UX processing is done in the thin-client, with (usually) a REST api to a back-end server for any data persistence/computation/access\n * Front-end is usually using an MVC framework, like Angular.js\n * The back-end uses Nodejs for easy manipulation of common data types (JSON blobs, JavaScript objects) and libraries."},{"_id":"467d893f72efb06284000022","treeId":"467b36d9b2cb02af99000038","seq":358062,"position":6,"parentId":"467b3986b2cb02af9900003d","content":"### Section 4: NodeJS in action\n* Based on Google's V8 JavaScript run-time engine\n* Pure JavaScript, with a robust core library for server operations\n* A thriving package directory with modules for almost any situation.\n* A number of frameworks, like Express.js, for easy web app development\n"},{"_id":"467d8f7772efb06284000023","treeId":"467b36d9b2cb02af99000038","seq":358166,"position":7,"parentId":"467b3986b2cb02af9900003d","content":"### Section 5: Conclusion\n* Web apps written in HTML5, CSS3 and JavaScript are becoming powerful enough to be used on mobile devices and desktop computers - sometimes with the same code\n* Webmaker is pushing the use of this tech forward\n* Questions?"}],"tree":{"_id":"467b36d9b2cb02af99000038","name":"Presentation Ideas","publicUrl":"presentation-ideas"}}