Vue.js @ A taste of modern Frontend

Introduction to Vue.js and modern Frontend approach.
---
Melbourne Vue.js Meetup: http://www.meetup.com/vuejs-melbourne/
Google Slides: http://bit.ly/2cSsuan
Presentation by: http://sylvainsimao.fr

Transcript

1. vuejs-australia.org Vue.js: A taste of modern Frontend @VueJsAustralia
2. @maoosi @_maoosi Sylvain Simao Senior Front-End Developer @ Clemenger BBDO
3. The Frontend revolution
4. Timeline of Web Technologies
5. HTML5 Leads a Web Revolution...
6. ...but what makes something Revolutionary ?
7. “Totally disrupts the established order and changes the dynamic of everything around”
8. What if I told you, that HTML5 is taking control ? • Flash banners become HTML5 banners • Games become browser games • Native mobile apps become hybrid apps • Software become web applications
9. And so began the reign of front-end web...
10. (... and the front-end chaos)
11. Why should you consider using a JS Framework ?
12. Advantages of using a Framework • Don’t reinvent the wheel • Do more with less code • Save time (and money) • Brings order out of chaos
13. DOM-Driven approach is problematic If we rename an element, or if we change the html structure, the code will be broken. Code complexity.
14. Data-Driven approach one way to reduce complexity (eg. with Vue.js) We can change the html structure and rename elements without breaking the code. Minimalist code. v-model = data-binding | v-if = conditional rendering
15. React Angular 2 Vue.js Text interpolation { message } {{ message }} {{ message }} Bind text content <div textContent={message}> <div [textContent]="message"> <div v-text="message"> DOM add/remove {shouldShow && <div />} <div *ngIf="shouldShow"> <div v-if='shouldShow'> Repeat items.map(item => <div key={item.id} /> ) <div *ngFor="let item of items"> <div v-for="item in items"> Bind event handler <button onClick={clicked}> <button (click)="clicked()"> <button v-on:click="clicked"> Define component ES6 class Polyglot extends React.Component @Component({})class Polyglot {} class Polyglot extends Vue Define component ES5 React.createClass({}) ng.core.Component({}).Class({}) Vue.extend({}) Two-way binding (native) not supported <input [(ngModel)]="foo" /> <input v-model="foo" /> Two-way binding (components) not supported <Child [(foo)]="bar" /> <child :foo.sync="bar"></child> Source: Front-end Hyperpolyglot
16. The State Of JavaScript: Survey about Front-End Frameworks Over 3000 responses from worldwide Front-End developers.
20. Should you use Vue.js?
21. You may or may not...
22. “Pick the right tool for the job”
23. So what’s Vue.js ? • Open-source progressive Framework • First release in Feb. 2014 • Created by Evan You (Meteor / Google Creative Lab)
24. Apr. 2015: this happened
25. Vue.js - Today • ~28,053 stars on GitHub • ~150k downloads/month (NPM only) • $8,000+ monthly support from the community
26. Frameworks are designed to help us deal with complexity.
27. DOM Problems with the DOM • Re-rendering entire chunks of DOM is expensive and disruptive • Ensuring that you keep the DOM in sync with the state is tedious and error-prone
28. Break UI into components, responsible for managing a piece of DOM Nav Content Item Sidebar
29. The entire UI can be abstracted into a tree of components
30. Declarative & Reactive Rendering View User Input State Render View is just a declarative mapping from the state State should be the single source of truth
31. Virtual DOM Render Function Template compile Virtual DOM Tree Actual DOM Tree create render Watcher track dependencies
32. ...vue.js is fast Vanilla JavaScript Vue 2.0.0-beta.1 React 15.3.0 Angular 2.0.0-rc.4 1x 1.29x 1.74x 1.97x Based on independent 3rd party comprehensive rendering benchmark
33. ...and approachable. <script src="vue.js"></script> <script> new Vue({ // ... }) </script>
34. • Imported as a ES6 module (easily testable) • Collocation of Template, Logic & Style • Just use what you already know: HTML, CSS & JavaScript • Embedded preprocessor support: Sass, Less, Pug, Stylus • Component-scoped CSS with a single attribute (no conflicts) Single File Vue Components
35. Nesting Components with Custom Elements <side-bar></side-bar> <tabs> <tab>...</tab> <tab>...</tab> </tabs>
36. Official Chrome DevTools Extension
37. Vue.js offers a rich ecosystem VueX (State management) Vue-Resource (HTTP requests) Vue-Router (Routing) Vue-CLI (Command line scaffolding)
38. Agencies will love it ... • Small learning curve and semantic • Pre-processor agnostic (Jade/Pug, Sass, Stylus...) • Server-side rendering (SEO / Javascript disabled) • Stable, maintained, and tested • Vue.js 2.x is (almost) retro-compatible
39. Do companies already uses Vue.js ?
40. Hell yeah !
41. Coding time !
42. > npm install -g vue-cli > vue-cli init webpack-simple-2.0 my-app > cd my-app > npm install > npm run dev
44. What’s next?
45. • Vue.js news • Case studies • In-depth learning • Hybrid Apps Laravel + Vue.js = <3
46. Vue 2.0 now in RC-7 rc.vuejs.org
47. Melbourne’s – and Australia’s - most awarded agency.
48. Thanks! vuejs-australia.org @VueJsAustralia