Recommended
More Related Content
What's hot
What's hot (20)
Similar to Introduction to Vue.js DevStaff Meetup 13.02
Similar to Introduction to Vue.js DevStaff Meetup 13.02 (20)
Recently uploaded
Recently uploaded (20)
Introduction to Vue.js DevStaff Meetup 13.02
- 1. Vue.js Paul Bele - DevStaff Meetup 13.02
- 2. Introduction to Vue.js ● Why do we need a Javascript framework? ● What’s special about Vue? ● Basic architecture with code examples ● Vue ecosystem ● Simple SPA example
- 3. Why do we need a (modern) JS Framework?
- 4. Example
- 5. The frameworks that are popular today have a few core commonalities: ● Synchronization of state and view ● Routing ● A template system ● Reusable components
- 6. What is Vue?
- 7. Introduction to Vue.js ● Github stars ○ Vue.js 151k ○ React 141k ○ Angular 59 k ● Google Trends ○ Passed React in August 2017 ● Enterprise support ○ Alibaba, Baidu, Adobe, IBM, etc (https://github.com/vuejs/awesome-vue#enterprise-usage)
- 8. Advantages ● Very Small Size ○ Angular: 500+ KB ○ React: 100 KB ○ Vue: 80 KB ● Performant (Virtual DOM) ● Uses same space with React and Angular ● Simple (One way data flow) ● Full-Featured API ● Powerful DevTools ● Active community ● Amazing documentation ● Easy to integrate into existing code base
- 9. Getting started ● Super easy way is to use JSFiddle Hello World example (https://jsfiddle.net/chrisvfritz/50wL7mdz/) ● <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ● Vue-cli is not recommended for beginners, especially if you are not familiar with node.js tools
- 10. Hello Vue.js
- 11. The VUE instance ● Ground Zero for a Vuejs app ● Accepts an object containing the Vue instance definition ● Most definitions are shared between instances and components ● Has lifecycle hooks which are functions that are called at specific points in the app/component lifecycle
- 12. Templates - HTML based Templating syntax - “Mustache” {{}} syntax for string interpolation and dynamic variables - Rendered via a virtual DOM, for efficient updates
- 13. Other Examples Directives, Conditionals, Loops
- 14. Directives
- 16. Loops
- 17. Methods & Event Handling ● Methods ○ Arbitrary functions ○ Can access/manipulate data ○ Can be called from templates, other methods
- 18. Methods & Event Handling
- 20. Filters
- 22. Lifecycle
- 23. Components ● Nested components hierarchy ● Each component renders either a template or returns createElement() calls ● Components are typically defined in single files with <template>, <script> and <style> sections
- 24. Components ● Re-usable. Can be packaged in libraries ● Leverages pre-processor (webpack, rollup) to support “all the formats” ● HTML templates, are heavily borrowed from Angular (directives) ● CSS ○ Stylus, SCSS, PostCSS, etc ● JS ○ ES6, ES7, Typescript, etc
- 25. Components
- 26. Vue.js - Batteries included - Vuex - Official app management system - Atomic and centralized, similar to Redux - Integrates with Vue Dev Tools - Vue-router - Official SPA router - Ecosystem - Because Vue sits in the same “seams” as React, ideas are quickly pulled from react world into Vue world - 10k+ packages on npm with “vue” in the name - Editor support: Atom, Visual Studio Code, Sublime, Intelij, etc
- 27. Vue-router - First-class Router for Vue.js applications - Similar conventions to React-Router < v4 - (or that’s what i heard) - Modes for hash(default) and browser history - Redirects, URL params, wildcard, full package!
- 28. Vuex - State management library, a la Redux - Provides conventions/constraints around application state - Single store - Data access via “getters” - Data modification via “mutations” - Asynchronous work done in “actions”
- 29. Vuex - State management pattern
- 30. Vuex
- 31. Example using vue-cli - A simple as possible SPA app using vue-cli project as a starting point - Have 3 pages and be able to pass GET parameters from one to the other - Leverage webpack dev server (setup by vue-cli)
- 32. Project Init
- 33. Dir structure
- 35. View code
- 36. ● Vue.js is not “just” another Javascript framework ● Aims for a 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 developers looking for a fresh SPAs Summary
Editor's Notes
- Welcome everyone, thanks for coming today! My name is Paul Bele, i am a web developer from Romania, i work remotely for a Jadu, a UK based company, and i want to say i’m really sorry i can’t be with you today, but hopefully pretty soon :)
- Today we are going to talk a bit about Vue.js, why and when do we need a javascript framework, talk about some basic aspects of Vuejs and it’s ecosystem, view some code examples as well as a very simple single page application example
- Put simply, a JavaScript framework is a tool that you can leverage to develop advanced web applications, especially SPAs. Back in the day, web developers would implement front end logic by relying heavily on vanilla JS and jQuery. But, as front end applications became more and more complex, the tools rose to meet that complexity. One of the main reasons why JavaScript frameworks exist, of course, beside the fact that you build the code in a more structure way, have ready available tools and don’t need to reinvent the wheel all the time is the that keeping the UI in sync with the state is hard
- Let’s take for example a simple input text where a user can add an email address to a list, and then delete it by clicking the delete button. We can think of the state of this form to be basically an array of objects containing the email addresses plus a unique identifier. Initially it will be empty. When adding an email address by typing it and hitting enter you add the typed email address to the array and update the UI. When the user clicks on “delete” you delete the email address and update the UI. Have you seen that? Every time you change the state, you need to update the UI. The code illustrates very well the amount of work needed to make a somewhat complex UI with vanilla JavaScript (using classic libraries such as jQuery would have been similar). In the example the static structure is created in the HTML, whereas the dynamic stuff is created in JavaScript (with document.createElement). This is the first problem: the JavaScript code that builds the UI is not very readable and we are defining the UI in two different parts. We could have used innerHTML and it could have been more readable but it’s less efficient and can cause Cross Site Scripting bugs. We could have used a templating engine as well, but if you regenerate a big subtree of the DOM you have two problems: is not very efficient and you have to usually reconnect the event handlers. But that’s not the biggest problem. The biggest problem is always updating the UI on every state change. Every time the state is updated there is a lot of code required to update the UI. When adding an email address in the example it takes 2 lines of code to update the state, but 13 lines to update the UI. And we made the UI as simple as possible!!
- The frameworks that are popular today have a few core commonalities. Most front end frameworks/libraries, from Vue to React, provide some combination of the following: Synchronization of state and view Routing A Template System Reusable components
- So...what is Vue? Why there is all this hype around it? It’s actually been getting a lot of popularity...it’s what it is called a view layer library and occupies the same space as React Vue is a progressive framework that it is about anything that you do that’s interacting with what people are seeing on their screen. How it appears, how you interact with it, all of this in a nice uni directional flow, where you start in one place and you control everything that is going on the screen Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
- Vue was created by Evan You and got really popular at the beginning of 2017. Laravel community started pick it up at about 2016 It passed ReactJS in terms of “github” popularity stars (151k vs 140k) at the time of writing It didn’t come up out of one of the big tech companies (Google, Amazon, Facebook). Evan You was at Google but it all started from the community effort Idea is that Facebook doing React, Google doing Angular, Vue started as a community effort, even though it got corporate sponsorship since then, Alibaba, Baidu, Adobe, etc…
- It is in the same space on what react does. It is about what Angular 2 tries to do, but in a way easier format, although i didn’t tried it You have a nice standard way of handling user interaction (click events,touch screen events, etc) as well as a nice supported ecosystem of libraries Vue also took advantage of loads of lessons learned from React. We got things like Virtual DOM. Virtual DOM is what makes single place apps way faster than it used to be. For example jQuery, if you have 500 items, and if you want to change something in them, you have to select all of them and modify that property for them, or destroying the elements and recreating them. Browser doesn’t like that. It is very slow
- This is the “Hello Vue.js” example. The markup contains a simple div that is identified by an id. The id which is the “app” id is where the Vue instance is hooking into the element and thus everything inside the div is controlled by Vue. When a Vue instance is created, it adds all the properties found in its data object to Vue’s reactivity system. When the values of those properties change, the view will “react”, updating to match the new values.
- Although not strictly associated with the MVVM pattern, Vue’s design was partly inspired by it. As a convention, we often use the variable vm (short for ViewModel) to refer to our Vue instance. When you create a Vue instance, you pass in an options object. The majority of this talk describes how you can use these options to create your desired behavior. For reference, Vue’s documentation is easy to read, easy to follow and there is a full API reference. A Vue application consists of a root Vue instance created with new Vue, optionally organized into a tree of nested, reusable components.
- Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers. Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes. If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also directly write render functions instead of templates, with optional JSX support.
- If you have not used AngularJS before, you probably don’t know what a directive is. Essentially, a directive is some special token in the markup that tells the library to do something to a DOM element. In Vue.js however the concept of directive is drastically simpler than that in Angular. A Vue.js directive can only appear in the form of a prefixed HTML attribute that takes the following format: In the div’s case, the prefix is v which is the default. The directive ID is text and the expression is message. This directive instructs Vue.js to update the div’s textContent whenever the message property on the Vue instance changes Here we are using a computed expression instead of a single property key. Vue.js automatically tracks the properties an expression depends on and refreshes the directive whenever a dependency changes. Thanks to async batch updates, even when multiple dependencies change, an expression will only be updated once every event loop. In the second example, there are directives that can receive an “argument”. In this case, we use the v-bind directive. bind dynamically binds one or more attributes to an expression.
- The ability to show or hide elements based on conditions is a fundamental feature of any frontend framework. Vue.js provides us with a set of core directives to achieve this effect: v-if, v-else, v-else-if and v-show. Conditionally render the element based on the truthy-ness of the expression value. The element and its contained directives / components are destroyed and re-constructed during toggles A very simple example could be to check if you have a list of items that you want to display, and only show the entire section of the app if that list of items exist, or show the error section of the website only if there is an error message to display
- The built-in v-for directive allows us to loop through items in an array or object. We can loop over items in our todos array from the data model. This can be done by adding the v-for directive in the element that should be repeated. Similarly we can loop over simple array elements or object properties without any issues
- So all of this functionality seems pretty straight forward but it doesn’t really help us do much. We still need a way to process data from the user, react to it, and structure our functionality around that Let’s firstly talk about methods. A Vue method is a function associated with the Vue instance. They are defined inside the methods property Methods are especially useful when you need to perform an action and you attach a v-on directive on an element to handle events. Like in the next example.
- We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered. The logic for many event handlers will be more complex though, so keeping your JavaScript in the value of the v-on attribute isn’t feasible. That’s why v-on can also accept the name of a method you’d like to call.d In this case, we use v-on where we pass in a parameter to the directive “click” which accepts a function name called “reverseMessage”. Every time the button is clicked, the reverseMessage method is called. As we talked previously, the method is defined inside the methods object as a parameter.
- v-model directive is a two-way binding for form inputs. It combines two directives that we talked about, v-bind, which brings a js value into the markup, and v-on:input to update the js value. So with this said, we would use v-bind for one way data binding from the JS variable to the input elements and v-model to additionally bring the input changes to the JS variable V-model is especially useful in forms where you will bind each input to a js variable object property, and then at the end save that object to the persistence layer v-model works with all the basic HTML input types (text, textarea, number, radio, checkbox, select). You can use v-model with input type=date if your model stores dates as ISO strings (yyyy-mm-dd). v-model has some extra smarts that it's good to be aware of. If you're using an IME (lots of mobile keyboards, or Chinese/Japanese/Korean), v-model will not update until a word is complete (a space is entered or the user leaves the field). v-input will fire much more frequently. v-model also has modifiers .lazy, .trim, .number, covered in the doc.
- Filters are a functionality provided by Vue that let you apply formatting and transformations to any part of your template dynamic data. They don’t change a component data or anything, but they only affect the output. What if you want to check that name is actually containing a value, and if not print ‘there’, so that our template will print “Hi there!”? Notice the syntax to apply a filter, which is | filterName. If you’re familiar with Unix, that’s the Unix pipe operator, which is used to pass the output of an operation as an input to the next one. The returned value is the one that’s actually printed in the Vue.js template. What’s a good use case for filters? transforming a string, for example, capitalizing or making it lowercase formatting a price
- In-template expressions are very convenient, but they are meant for simple operations. Putting too much logic in your templates can make them bloated and hard to maintain. For example how would it look if we would move the reverseMessage contents directly into the template At this point, the template is no longer simple and declarative. You have to look at it for a second before realizing that it displays message in reverse. The problem is made worse when you want to include the reversed message in your template more than once. That’s why for any complex logic, you should use a computed property. You can data-bind to computed properties in templates just like a normal property. Vue is aware that vm.reversedMessage depends on vm.message, so it will update any bindings that depend on vm.reversedMessage when vm.message changes. And the best part is that we’ve created this dependency relationship declaratively: the computed getter function has no side effects, which makes it easier to test and understand. You may have noticed we can achieve the same result by invoking a method in the expression: The difference between the two is that computed properties are cached based on their reactive dependencies. In comparison, a method invocation will always run the function whenever a re-render happens.
- This is the lifecycle of a Vue.Js app. You can hook to each of the events (marked by red) and perform actions Creation hooks are the very first hooks that run in your component. They allow you to perform actions before your component has even been added to the DOM. Mounting hooks are often the most-used hooks, for better or worse. They allow you to access your component immediately before and after the first render. Updating hooks are called whenever a reactive property used by your component changes, or something else causes it to re-render. They allow you to hook into the watch-compute-render cycle for your component. Destruction hooks allow you to perform actions when your component is destroyed, such as cleanup or analytics sending. They fire when your component is being torn down and removed from the DOM.
- Vue components are a nice vue innovation where they do exactly what each developer knows: html css and javascript. So why not...put it all together and make and make it all part of the view framework. Although not mandatory, the idea in Vue is that you can combine all of them in a single Vue file (might get some folks triggered about css being declared on a separate file but css is actually defined per component base).
- What you can also do with a Vue component is take leverage of pre-processors. In the time between react and angular was first made, this hole eco-systems was made up, starting with say gulp, and then webpack and rollup and other pre-processors.The entire idea is that you are not writing code that is executing in the browser anymore. This means that you are a lot freer about the code that you want it to be structure the way you want it to be. There is no such way to have a .vue file be loaded in the browser, it is just source, not executable code. Even though we are losing a bit of functionality with this, there are debuggers and tools that doesn’t tend to be a problem. React and Angular do the same thing, all modern web development runs through some pre-processor. That’s how we have typescript.
- The batteries are all included. Because vue sits in the same place as react did at the view layer, it’s taken all the different lessons learned and it copied them. Basically if you do something in react, you can do it in view. For example the flux related libraries for maintaining state. Officially endorsed one: Vuex and so it is really powerful and takes the same features from redux (namespace states, patch)
- In a single page application, you need a router to control what components to load and what “page” to display. This is vue-router Everyone uses that, really powerful, it does it one way, and it’s the endorsed one from vue
- Vuex helps us deal with shared state management with the cost of more concepts and boilerplate. It's a trade-off between short term and long term productivity. If you've never built a large-scale SPA and jump right into Vuex, it may feel verbose and daunting. That's perfectly normal - if your app is simple, you will most likely be fine without Vuex. A simple store pattern may be all you need. But if you are building a medium-to-large-scale SPA, chances are you have run into situations that make you think about how to better handle state outside of your Vue components, and Vuex will be the natural next step for you. Vuex serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.
- This is a simple representation of the concept of "one-way data flow": The state, the source of truth that drives our app; The view, a declarative mapping of the state; The actions, the possible ways the state could change in reaction to user inputs from the view.
- However, the simplicity quickly breaks down when we have multiple components that share a common state: Multiple views may depend on the same piece of state. Actions from different views may need to mutate the same piece of state. So why don't we extract the shared state out of the components, and manage it in a global singleton? With this, our component tree becomes a big "view", and any component can access the state or trigger actions, no matter where they are in the tree! By defining and separating the concepts involved in state management and enforcing rules that maintain independence between views and states, we give our code more structure and maintainability. There's a good quote from Dan Abramov, the author of Redux: Flux libraries are like glasses: you’ll know when you need them.
- V
- V