Room with a Vue - Introduction to Vue.js

Information about Room with a Vue - Introduction to Vue.js

Published on December 10, 2017

Author: zak89s

Source: slideshare.net

Content

1. ROOM WITH A VUE INTRODUCTION TO VUE.JS December 8, 2017

2. ROOM WITH A VUE ABOUT ME ▸ Me: Zachary Klein ▸ Based in St Louis, MO ▸ Web dev since 2010 ▸ Work for Object Computing, Inc ▸ Specialize in Grails & frontend development

3. ROOM WITH A VUE ABOUT US ▸ My company: Object Computing, Inc ▸ Based in St Louis, MO ▸ Consulting and training provider (24+ years experience) ▸ Corporate sponsor to the Grails framework and Groovy language ▸ https://objectcomputing.com

4. ROOM WITH A VUE ABOUT US ▸ Grails: A dynamic, flexible web application framework ▸ Built on top of Spring Boot ▸ First-class support for REST APIs ▸ Profiles for building applications using React, Angular, Webpack, and RESTful backends ▸ Powerful persistence layer with GORM - supports Hibernate, MongoDb, Neo4J, GraphQL, and more ▸ Rich plugin ecosystem: 200+ plugins and growing ▸ Active community and commercial support available. ▸ https://grails.org

5. SHIELDS UP - SECURING REACT APPS

6. HTTP://START.GRAILS.ORG ROOM WITH A VUE

7. HTTP://GUIDES.GRAILS.ORG ROOM WITH A VUE

8. ROOM WITH A VUE ABOUT US ▸ You: ▸?

9. ROOM WITH A VUE OVERVIEW ▸ Introduction to Vue.js ▸ Building an app ▸ Ecosystem ▸ Comparison

10. ROOM WITH A VUE INTRODUCTION TO VUE.JS ▸ Seriously, another JavaScript framework? ▸ What’s special about Vue? ▸ Trends and stars

11. ROOM WITH A VUE http://www.timqian.com/star-history/#facebook/react&angular/angular&vuejs/vue

12. ROOM WITH A VUE WHAT IS VUE? ▸ Released in 2014 ▸ Current major release (2.x) in 2016 ▸ Evan You (inventor & core developer) comes from a Google/Angular background ▸ Balances between the power/complexity of Angular and the simplicity/focus of React

13. ROOM WITH A VUE WHAT IS VUE? ▸ Small, focused view library ▸ Performant* ▸ Full-featured API ▸ Mature* ecosystem ▸ Powerful devtools ▸ Active community

14. ROOM WITH A VUE GETTING STARTED ▸ Install from NPM ▸ Install vue-cli ▸ vue init [template] my-app ▸ Multiple templates available - simple, webpack-simple, & webpack

15. ROOM WITH A VUE <script src="https://unpkg.com/vue"></script> <div id=“app”> {{ text }} </div> <script> var app = new Vue({ el: '#app', data: { text: ‘Hello World!’ } }) </script> GETTING STARTED

16. ROOM WITH A VUE THE VUE INSTANCE ▸ Ground zero for a Vue.js app ▸ Accepts an object containing the Vue Instance definition ▸ Most definitions shared between instance and components new Vue({ el: ‘#app’, data: {...}, computed: {...}, methods: {...}, template: '<App/>' }) export default { name: 'component', data () { return {...} }, name: 'component', methods: {...} } Vue ComponentVue Instance

17. ROOM WITH A VUE THE VUE INSTANCE ▸ Element ▸ Specifies the DOM element where the app will be rendered new Vue({ el: ‘#app’ }) <div id="app"></div>

18. ROOM WITH A VUE THE VUE INSTANCE ▸ Data ▸ An object describing the state of the app/component ▸ Properties are subject to reactive rendering within the app/component (one-way & two-way) ▸ New properties can be added, but will not be subject to reactive behavior ▸ Components must use a data() function that returns state

19. ROOM WITH A VUE THE VUE INSTANCE ▸ Data new Vue({ data: { myValue: 3, myObject: { prop: 'abc' } } }) export default { data () { return { myValue: 3, myObject: { prop: 'abc' } } } Vue ComponentVue Instance

20. ROOM WITH A VUE THE VUE INSTANCE ▸ Methods ▸ Arbitrary functions ▸ Can access/manipulate data ▸ Can be called from templates, other methods methods: { toggleLinks: function () { this.showLinks = !this.showLinks } },

21. ROOM WITH A VUE THE VUE INSTANCE ▸ Computed Properties ▸ Functions that return dynamic values ▸ Accessed from templates & methods as state properties

22. ROOM WITH A VUE THE VUE INSTANCE ▸ Lifecycle Hooks ▸ Functions that are called at specific points in the app/ component lifecycle created: function () { this.$http.get(`${this.$data.serverURL}/application`).then(response => { this.$data.serverInfo = response.body }) },

23. ROOM WITH A VUE

24. ROOM WITH A VUE

25. ROOM WITH A VUE TEMPLATES ▸ HTML based Templating syntax ▸ “Mustache” {{}} syntax for string interpolation and dynamic variables ▸ Directives ▸ prefixed with “v-“ ▸ accept arguments separated by “:” ▸ support modifiers prefixed with “.” ▸ Rendered via a virtual DOM, for efficient updates

26. ROOM WITH A VUE TEMPLATES <template> <div class="form"> <div class="title cell"> <label>Title</label> <input ref="bookTitle" v-model="book.title" type="text"/> </div> <div class="pages cell"> <label>Pages</label> <input v-model="book.pages" type="text"/> </div> <div class="author cell"> <label>Author</label> <select v-model="book.author"> <option disabled selected value="">Choose Author</option> <option v-if="author !== null" v-bind:value="{ id: author.id }" v-for="author in authors">{{author.name}}</option> </select> </div> <div class="save cell"> <button @click="submitNewBook()" >Add Book</button> </div> </div> </template>

27. ROOM WITH A VUE COMPONENTS ▸ Nested component hierarchy ▸ Each component renders either a template or returns createElement() calls (JSX is supported) ▸ Components typically defined in single files with <template>, <script>, and <style> sections

28. ROOM WITH A VUE ECOSYSTEM ▸ State Management - Vuex ▸ Routing - Vue Router ▸ UI Libraries - VueStrap (3), BootstrapVue (4) & VueMaterial

29. ROOM WITH A VUE ECOSYSTEM ▸ State Management - Vuex ▸ Routing - Vue Router ▸ UI Libraries ▸ VueStrap (Bootstrap 3) ▸ BootstrapVue (Bootstrap 4) ▸ VueMaterial (Material UI)

30. ROOM WITH A VUE VUEX ▸ State-management library, a la Redux ▸ Provides conventions/constraints around application state ▸ Single store ▸ Data access via “getters” ▸ Data modifications via “mutations” ▸ Asynchronous work done in “actions”

31. ROOM WITH A VUE VUEX ▸ The Store ▸ Top-level object: new Vuex.Store() ▸ Receives an object of properties, similar to Vue.Instance definition ▸ Single state tree (can be divided into modules) ▸ Store accessed by components via computed properties ▸ Store can only be modified by mutations

32. ROOM WITH A VUE VUEX const store = new Vuex.Store({ state: { authors: [], books: [] }, mutations: { addBook (state, payload) { state.books.push(payload.book) }, addAuthor (state, payload) { console.log('adding author...') state.authors.push(payload.author) }, removeBook (state, payload) { state.books = state.books.filter(b => b.id !== payload.id) }, removeAuthor (state, payload) { state.books = state.authors.filter(b => b.id !== payload.id) }, setBooks (state, payload) { state.books = payload.books }, setAuthors (state, payload) { state.authors = payload.authors } } })

33. ROOM WITH A VUE VUEX ▸ Getters ▸ “Computed properties” for store values ▸ Not needed for direct access to store properties ▸ Useful for filtering - `completedTodos`, `expiredSubs`, etc getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) } }

34. ROOM WITH A VUE VUEX ▸ Mutations ▸ Analogous to “events” - has a type & handler function ▸ Not called directly - instead “committed” to the store ▸ Can accept a “payload” argument (usually an object) ▸ Synchronous transactions only mutations: { addBook (state, payload) { state.books.push(payload.book) } }

35. ROOM WITH A VUE VUEX ▸ Actions ▸ Store functions that commit mutations ▸ Are “dispatched” from the store ▸ Can perform asynchronous work (REST calls, etc) ▸ Can dispatch other actions ▸ Receive a “context” arg with access to store variables/ methods

36. ROOM WITH A VUE VUEX ▸ Actions actions: { loadAuthors: function ({commit, state}) { fetch(`${state.serverURL}/author`) .then(r => r.json()) .then(json => commit('setAuthors', {authors: json})) .catch(e => console.warn(e)) } }

37. ROOM WITH A VUE VUE-ROUTER ▸ First-class Router for Vue.js applications ▸ Similar conventions to React-Router < v4 ▸ Modes for hash (default) & browser history ▸ Redirects, URL params, wildcards, oh my!

38. ROOM WITH A VUE COMPARE AND CONTRAST - ANGULAR ▸ A cleaner, simpler way to build apps ▸ Similar concepts/syntax: directives, templates, v-model ▸ More understandable, readable code ▸ Less code ▸ A rich, featureful API that doesn’t make you do everything with plain JavaScript ▸ Not a framework - you’ll still need to add packages

39. ROOM WITH A VUE COMPARE AND CONTRAST - REACT ▸ Adding some magic back in to JavaScript ▸ Similar concepts/syntax: components, virtual DOM, lifecycle methods ▸ Supports JSX* ▸ Less code… sometimes ▸ Less opaque than Angular - but not “pure” JS

40. ROOM WITH A VUE SUMMARY ▸ Vue.js is not “just” another JavaScript framework ▸ Aims for balance between rich, developer-friendly features and clean, understandable code ▸ Community is vibrant and engaged, and shows every sign of being in this for the long haul ▸ Vue.js is definitely worth learning, either as a first-timer’s JavaScript framework or for developers looking for a fresh view of SPAs

41. ROOM WITH A VUE LINKS ▸ http://vuejs.org (links to Vuex/Vue-Router) ▸ https://github.com/vuejs/awesome-vue ▸ https://medium.com/unicorn-supplies/angular-vs-react-vs- vue-a-2017-comparison-c5c52d620176 ▸ https://medium.freecodecamp.org/between-the-wires-an- interview-with-vue-js-creator-evan-you-e383cbf57cc4

42. ROOM WITH A VUE LINKS ▸ http://vuejs.org (links to Vuex/Vue-Router) ▸ https://github.com/vuejs/awesome-vue ▸ https://medium.com/unicorn-supplies/angular-vs-react-vs- vue-a-2017-comparison-c5c52d620176 ▸ https://medium.freecodecamp.org/between-the-wires-an- interview-with-vue-js-creator-evan-you-e383cbf57cc4

43. ROOM WITH A VUE LINKS ▸ http://vuejs.org (links to Vuex/Vue-Router) ▸ https://github.com/vuejs/awesome-vue ▸ https://medium.com/unicorn-supplies/angular-vs-react-vs- vue-a-2017-comparison-c5c52d620176 ▸ https://medium.freecodecamp.org/between-the-wires-an- interview-with-vue-js-creator-evan-you-e383cbf57cc4

44. THANK YOU Twitter: @ZacharyAKlein. Github: @ZacharyKlein. Email: [email protected]

Related presentations


Other presentations created by zak89s

Shields Up! Securing React Apps
10. 12. 2017
0 views

Shields Up! Securing React Apps

Groovy for Java Devs
08. 03. 2019
0 views

Groovy for Java Devs

Grails 4: Upgrade your Game!
01. 10. 2020
0 views

Grails 4: Upgrade your Game!