JSConf 2015 (ShenJS)

Some thinking from JSConf China 2015.

Transcript

1. JSConf 2015
2. Agenda • JS with Front-end • JS with Back-end • JS with Everything
3. Javascript with Front-end
4. Front-end Evolution Separation of Front-end and Back-end MVC in Front-end
5. MVVM • Angular.js • All included framework • Vue.js • Library focus on View Model • React.js • Library focus on View Model
6. MVVM (cont.) • Todo List Demo • Angular.js • Vue.js • React.js
7. React
8. JSX
9. JSX (cont.) • Mix HTML into JS?
11. Virtual DOM • Virtual DOM • An abstraction for real DOM. App React Virtual DOM Real DOM
12. Virtual DOM (cont.) • Why abstraction? • DOM manipulation is expensive! • Accelerate DOM update!
13. Virtual DOM (cont.) App Virtual iOS Component Real iOS Componenet • Why abstraction? • Learn once, write everywhere.
14. React Native
15. Virtual DOM (cont.) • Why abstraction? • Isomorphic Javascript var  html  =React.render(<HelloMessage  />);   res.send(html)
16. Immutable Data • Any method that modifies a collection will return a new collection instead of mutating the original. • Demo
17. Persistent Data Structure • Memory wasting problem?
18. Immutable Data (cont.) • Why Immutable Data? • Prevent side effects • Faster deep equality checking • Pointer comparisons, treat collections as values • Makes handling “undo” easy and efficient
19. Problems with REST • REST is tough: it’s resource based! REST API Service I need User data! /api/User/123 REST API Service I need Account data! /api/Account/456 REST API Service I need User with his associate Account data! ?
20. 装作听不懂的样⼦子！ Sorry, I don’t understand!
21. Problems with REST (cont.) • Real world Demo (Nexus-Web) Storage Centric VS Production(UX) Centric
22. Problems with REST (cont.) Back-end 欧巴! Please add a new “Composite” API 思密达！
23. GraphQL
24. GraphQL (cont.)
25. React • JSX • Virtual DOM • Immutable Data • GraphQL
26. ES6 • Next Generation Javascript • Already approved in June 2015 Fix its own bad things Steal good things from other languages
27. ES6 (cont.) • https://github.com/lukehoban/es6features Class Generator Let + Const Modules Arrow function For … of …
28. ES6 (cont.) • Let + Const • For … of … • Generator
29. Generator for Async • Callback Hell
31. Generator for Async (Cont.)
32. Generator for Async (Cont.) • Use Generator
33. Generator for Async (Cont.) • Runner
35. ES6 (cont.) • Babel • Use next generation Javascript, NOW! • A transpiler to transform ES6 code to ES5. • Demo
36. Test • Demo (WhiteLabel P2)
37. Javascript with Back-end
38. Node.js • Cloud Computing • New web framework: koa.js/toa.js • P2P Game • fib.js: New “Node.js” based on V8
39. Tools for Node.js • Cluster Monitoring • PM2
40. Tools for Node.js • Cluster Monitoring • Keymetrics
41. Tools for Node.js • Performance Profiler • Node Profiler
42. Meteor.js • Let the UI talk to the database.
43. Meteor.js • Minimongo
44. Javascript with Everything
45. NodeBot
46. Nerd Disco
47. Nerd Disco (cont.)
48. Nerd Disco (cont.) • Demo • Video on 优酷 • Code • Github
49. Research • Polyvia • Image processing with canvas • Demo1 Demo2 • DNA • 华⼤大基因
50. WebGL • OpenGL on Web • Slide http://avgp.github.io/shenjs-3d/ • Other Demos • https://crazyskills.panasonic.com/en/ • http://www.ro.me/ • WebVR
51. – A speaker from Alibaba “每18个⽉月~24个⽉月，前端都会难⼀一倍”
52. – Someone “Any application that can be written in JavaScript will eventually be written in JavaScript.”
53. All Slides: ! https://github.com/jsconfcn/ShenJS/ issues/30