Good old web • Client requests HTML. • Server responses HTML. • Very simple • JavaScript doesn’t have to use. browser server GET /index.html index.html GET /about.html about.html
CoffeeScript • Jeremy Ashkenas • CoffeeScript is a little language that compiles into JavaScript • Brevity and readability. • Rails 3.1 CoffeeScript • Some features are in ECMAScript 2015 2010(1.0)
Isomorphic • Share the code between client and server • → For maintenance • Initial render executes on the server • → For SEO and Performance • Frameworks have different approaches • Meteor, Rendr…
browser server HTML included contents GET app.js GET / Node.js You can see the contents! Start to run your JavaScript on the browser GET /other/page Route on the browser
The requirements of SPA • Binding JSON data to DOM • Routing by the browser History API • Browser side template engine • Data management • Memory management
Angular.js • Google • HTML enhanced for web apps. • 2way Data binding • Full stack (ng-http, ng-router…) • Very simple? (initially) • Angular 2 is completely different. release:2009 1.0: 2012
browserify • substack • Browserify lets you require('modules') in the browser by bundling up all of your dependencies. • No more concatenating which is depending on the order • It makes possible to share code between the browser and server. 2013
Babel • Sebastian McKenzie • JavaScript transpiler • Use next generation JavaScript, today. • We can use ECMAScript 2015 now! • Stage option (default is stage2) ʙ 5.x 2014
Service Workers • JavaScript is more powerful. • Run independently of web pages. • Intercept Request • Offline / Cache • Background Sync • Push Notification • HTTPS Only
Extensible Web • The Extensible Web Manifesto • https://extensiblewebmanifesto.org/ • New low-level capabilities • Virtuous cycle • Prioritize efforts • Web Components ➜ Polymer
Functional Reactive Programming • Asynchronous data streams • A stream is a sequence of ongoing events ordered in time. • Mouse event, touch event, fetch response… • Observer and observable • Rx.js, Bacon.js, ECMAScript Observable(stage1)
Redux • Inspired by Flux and Elm • Actions, A Store, Reducers • Reducers are pure functions • (state, action) => state • State is read-only • Single source of truth
Unix philosophy • Small is beautiful. • Make each program do one thing well. • Build a prototype as soon as possible. • Choose portability over efficiency. • Store data in flat text files. • Use software leverage to your advantage. • Use shell scripts to increase leverage and portability. • Avoid captive user interfaces. • Make every program a Filter.