Vue.js @ A taste of modern Frontend

Slide 1

Slide 1 text

vuejs-australia.org Vue.js: A taste of modern Frontend @VueJsAustralia

Slide 2

Slide 2 text

@maoosi @_maoosi Sylvain Simao Senior Front-End Developer @ Clemenger BBDO

Slide 3

Slide 3 text

The Frontend revolution

Slide 4

Slide 4 text

Timeline of Web Technologies

Slide 5

Slide 5 text

HTML5 Leads a Web Revolution...

Slide 6

Slide 6 text

...but what makes something Revolutionary ?

Slide 7

Slide 7 text

“Totally disrupts the established order and changes the dynamic of everything around”

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

And so began the reign of front-end web...

Slide 10

Slide 10 text

(... and the front-end chaos)

Slide 11

Slide 11 text

Why should you consider using a JS Framework ?

Slide 12

Slide 12 text

Advantages of using a Framework ● Don’t reinvent the wheel ● Do more with less code ● Save time (and money) ● Brings order out of chaos

Slide 13

Slide 13 text

DOM-Driven approach is problematic If we rename an element, or if we change the html structure, the code will be broken. Code complexity.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

React Angular 2 Vue.js Text interpolation { message } {{ message }} {{ message }} Bind text content

DOM add/remove {shouldShow &&

}

Repeat items.map(item =>

)

Bind event handler 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 Two-way binding (components) not supported Source: Front-end Hyperpolyglot

Slide 16

Slide 16 text

The State Of JavaScript: Survey about Front-End Frameworks Over 3000 responses from worldwide Front-End developers.

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Should you use Vue.js?

Slide 21

Slide 21 text

You may or may not...

Slide 22

Slide 22 text

“Pick the right tool for the job”

Slide 23

Slide 23 text

So what’s Vue.js ? ● Open-source progressive Framework ● First release in Feb. 2014 ● Created by Evan You (Meteor / Google Creative Lab)

Slide 24

Slide 24 text

Apr. 2015: this happened

Slide 25

Slide 25 text

Vue.js - Today ● ~28,053 stars on GitHub ● ~150k downloads/month (NPM only) ● $8,000+ monthly support from the community

Slide 26

Slide 26 text

Frameworks are designed to help us deal with complexity.

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Break UI into components, responsible for managing a piece of DOM Nav Content Item Sidebar

Slide 29

Slide 29 text

The entire UI can be abstracted into a tree of components

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Virtual DOM Render Function Template compile Virtual DOM Tree Actual DOM Tree create render Watcher track dependencies

Slide 32

Slide 32 text

...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

Slide 33

Slide 33 text

...and approachable. new Vue({ // ... })

Slide 34

Slide 34 text

● 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

Slide 35

Slide 35 text

Nesting Components with Custom Elements ... ...

Slide 36

Slide 36 text

Official Chrome DevTools Extension

Slide 37

Slide 37 text

Vue.js offers a rich ecosystem VueX (State management) Vue-Resource (HTTP requests) Vue-Router (Routing) Vue-CLI (Command line scaffolding)

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Do companies already uses Vue.js ?

Slide 40

Slide 40 text

Hell yeah !

Slide 41

Slide 41 text

Coding time !

Slide 42

Slide 42 text

> npm install -g vue-cli > vue-cli init webpack-simple-2.0 my-app > cd my-app > npm install > npm run dev

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

What’s next?

Slide 45

Slide 45 text

● Vue.js news ● Case studies ● In-depth learning ● Hybrid Apps Laravel + Vue.js = <3