spreading-the-web



spreading-the-web

0 0


spreading-the-web

My presentation on the rise of JavaScript and web technologies and their spread outside of browsers.

On Github mklakakilli / spreading-the-web

The first web page

  • 3:28 - Intro to hardware
  • 5:00 - Dial In
  • 9:00 - Fetching Web page

Spreading the web

Presentation by Michal Vanko

Introduce yourself Presentation is going to be about:
  • Web Technologies - what they are. what they do. What are they going to be.
  • JavaScript, Future Wasm
  • NodeJS
  • Tools
  • Internet Of Things
Ask for questions during the presentation

Web Technologies

  • SGML 1980
  • HTML - Tim Berners-Lee 1990
  • HTML5 - 2014
  • CSS - Håkon Wium Lie 1994 - 1996
  • CSS2 - 1998
  • CSS3 - 1999 split into modules
  • JavaScript - 1995 by Brendan Eich in 10 days
  • JavaScript Programming language of the year 2014 (Tiobe index)
SGML - Standard Generalized Markup Language HTML - described 18 tags, 11 still exists CSS was proposed 1994 and became official in 1996 There was an attemp for JavaScript Style Sheets Tim and Håkon were colleages at CERN CSS modules level 4 are beign designed today. Microsofts JScript 1996 JavaScript - Imperative Dynamic Functional Prototyped Based

HTTP/2

  • Maintain high-level compatibility with HTTP 1.1
  • Based on SPDY
  • Decrease latency to improve page load speed in web browsers
    • Data compression of HTTP headers
    • Server push technologies
    • Fixing the head-of-line blocking problem in HTTP 1
  • Loading page elements in parallel over a single TCP connection
HTTP/2 is the second major version of the HTTP network protocol It is based on SPDY. HTTP 1.1, which was standardized in RFC 2068 in 1997. Proposed Standard in December 2014,The HTTP/2 specification was published as RFC 7540 in May 2015.[8] HTTP/2 uses SPDY as a jumping-off point. HTTP/2, however, uses a fixed Huffman code-based header compression algorithm, instead of SPDY's dynamic stream-based compression. This helps to reduce the potential for attacks on the protocol. On February 9, 2015, Google announced plans to remove support for SPDY in Chrome by early 2016, in favor of support for HTTP/2, starting with Chrome 40.[19]

HTTP/1 is old and slow

Put your speaker notes here. You can see them pressing 's'.

HTTP/2 demo

Put your speaker notes here. You can see them pressing 's'.

HTTP/2 support

Put your speaker notes here. You can see them pressing 's'.

New opportunities

As of February 2015, the root domain contains 810 top-level domains

New browser APIs

  • ServiceWorkers
  • Vibration API
  • Push API
  • WebVR
A service worker is a script that is run by your browser in the background, In the future this will include push messages, background sync, and geofencing, but the first feature it will launch with is the ability to intercept and handle network requests The reason this is such an exciting API is that it allows you to support offline experiences, giving developers complete control over what exactly that experience is. Web apps are getting more native with Vibration API and Push API. Native notifications. Offline ServiceWorkers.
"I'd rather wait 10 more years than make a big fat mistake in a worlds biggest programming language." Jafar Husain - Netflix UI Architect & TC-39 Member EcmaScript 4 Fourth Edition was abandoned, due to political differences concerning language complexity. Many features proposed for the Fourth Edition have been completely dropped; some are proposed for ECMAScript Harmony. 2007 Classes A module system Optional type annotations and static typing, probably using a structural type system Generators and iterators Destructuring assignment Algebraic data types ACTION SCRIPT - FLASH

JavaScript ES2015 finally here (or not)

  • Classes
  • Modules
  • Promises
  • Arrow functions
  • Generators
  • Iterators
  • Destructuring
  • Default - Rest - Spread parameters
  • Let + Const
  • Map, Set, weakmap, weakset
  • Proxies
  • Symbols
  • Template Strings
  • Typed arrays
  • Much much more
ES6 Features ES6 Feature preview ES6 Compatibility table

JavaScript ES2016 is just around

  • Object.observe
  • Exponent operator **
  • SIMD
  • Async Await (callback heaven)
  • Typed objects
  • Decorators
  • mapPar, filterPar, reducePar
  • int64, uint64
  • and moooore....
Single Instruction Multiple data Async await story

WASM & ASM

"The web platform is getting a new low-level binary compile format that will do a better job at being a compiler target than JavaScript." Brendan Eich

WebAssembly is:

An improvement to JavaScript: Implement your performance critical stuff in wasm and import it like a standard JavaScript module.

A new language: Represented in a binary format. You can author and debug in a text format so it’s readable.

A browser improvement: Browsers will understand the binary format, which means we’ll be able to compile binary bundles that compress smaller than the text JavaScript we use today. Smaller payloads mean faster delivery. Depending on compile-time optimization opportunities, WebAssembly bundles may run faster than JavaScript, too!

A Compile Target: A way for other languages to get first-class binary support across the entire web platform stack.

These are very simple primitives. Nothing fancy. No complicated object system (prototypal or otherwise). No built-in automatic garbage collector following you around and stopping you periodically while it cleans up your scraps.

asm.js

Let's play some games

DeadTrigger2 - Game WebGl http://beta.unity3d.com/jonas/DT2/

Asm.js

Asm.js is a subset of JavaScript It’s important to note that Asm.js is just JavaScript – there is no special browser plugin or feature needed in order to make it work (although a browser that is able to detect and optimize Asm.js code will certainly run faster).

wasm

"WebAssembly fills in the gaps that would be awkward to fill with JavaScript."Eric Elliott

  • Community Group - Google, Microsoft, Mozilla, Apple, and others
  • Better compiler target for the web
  • Primitive - no garbage collector
  • binary representation is 20 times faster to parse than the equivalent asm.js
  • Polyfill to asm.js

These are very simple primitives. Nothing fancy. No complicated object system (prototypal or otherwise). No built-in automatic garbage collector following you around and stopping you periodically while it cleans up your scraps.

The initial focus is for WebAssembly to be a compilation target for C/C++.

node $ git merge iojs

iojs is community fork of node. it was forked because of lack of new features in node with upcoming es6. they are merging back as a node foundation.

Modules modules modules

does this slide need any comments?

Tools matured

Developer experience

The Rise of Transpilers

Use next generation JavaScript, today. JSX and React, flow Pluggable Easy way to support old browsers.

VS

Both suppoty existing definition files for existing 919 libraries. Both use same type syntax - which eventually could hit ES standards Typescript adds interfaces and has to be compiled to JavaScript while for flow it just has to parse out type definitions

Modular CSS?

  • SystemJS - Universal dynamic module loader
  • JSPM - browser package management
SystemJS - Universal module loader + plugins built on top of ES6 module spec, Support for any type of modules, globals, commonjs, AMD.... Plugins- CSS JSPM - bundling

web-frameworks on github

Put your speaker notes here. You can see them pressing 's'.

Desktop Apps

  • Automatic updates
  • Crash Reporting
  • Windows installers
  • Debugging and profiling
  • Native menu and notifications
With Electron, creating a desktop application for your company or idea is easy. Initially developed for GitHub's Atom editor, Electron has since been used to create applications by companies like Microsoft, Facebook, Slack, and Docker. Applications build on Electron: Atom, Slack, Visual Studio Code, mapbox and more...

React Native

A FRAMEWORK FOR BUILDING NATIVE APPS USING REACT

  • Native iOS components - native speed
  • Asynchrounous Execution
  • Touch handling
Asynchrounous Execution - javascript is executed on seperate thread so its never blocking UI

Firefox OS

Linux kernel + Firefox

All Apps are JavaScript Web Apps. Works offline.

Internet of Things

most of the platforms are compatible with the arduino project

Thank You

Put your speaker notes here. You can see them pressing 's'.