Monday 3 September 2018

"The Vue Handbook" Annotations - Part 1: Introduction and the first Vue.js app

Driven by professional needs and my curiosity, I decided to start learning Vue.js. It is a very popular JavaScript framework which can be used for UI development of variety of products, from web front-end, browser extensions to native mobile and desktop applications.

I decided to start my journey by reading The Vue Handbook: a thorough introduction to Vue.js by Flavio Copes. I will use a series of blog posts to track my learning progress and document annotations to this book I find useful to me and to other readers.

So, let's start.



Introduction - General info about Vue.js


Vue.js is a progressive framework meaning that it allows initial intervention at small pieces of code with no need to change existing architecture which can gradually expand onto the entire view layer.

It uses Virtual DOM (idea taken from React but in Vue has better performance and it's easier to use)
Vue uses HTML template syntax. Think of it as the syntax extension of HTML which facilitates dynamic binding of values in user-facing elements and underlying components that contain data. Many similar frameworks have such concept:
  • Angular template syntax
  • Handlebars
  • The Django template language (this is Python but general explanation about templates applies to Vue as well)
    • Django template system is not simply Python embedded into HTML. This is by design: the template system is meant to express presentation, not program logic.
    • A template is simply a text file. It can generate any text-based format (HTML, XML, CSV, etc.).
    • A template contains variables, which get replaced with values when the template is evaluated, and tags, which control the logic of the template.
    • Variables look like this: {{ variable }}. When the template engine encounters a variable it evaluates that variable and replaces it with the result.
    • React does NOT have templates! Here's why. It uses JSX.
      Vue's official state management library is Vuex (vuex package). It follows the Flux architecture [docs],


      What is state management in front-end?
      • What does state-management even mean and why does it matter in Front End Web Development with frameworks like React or Vue?
        • In front-end programming, one of the most essential demands is that the UI/display always reflect current application state, especially as state changes in response to user interaction. Binding JavaScript values to the display (the DOM) is the essence of React, Vue and Angular.
        • (...) create an architecture in which all the values in state are stored in a central location, with their current values funneled down to whatever components display these values. Thus modern state management of the Flux/Redux/ngrx model demands the creation of a “store” — a centralized object where all of the values in state are collected.
        • The key idea (...) is to make sure that state (meaning any one or more of the values in state) cannot be changed except by defined “actions” that are processed by a “reducer” function. The idea is to create a definite and exclusive list of ways in which state can possibly be changed, and then to process these actions in a distinct sequence.
        • Learn State Management
        • State Management

        Its routing package is: vue-router


            The very first example


            Source:


            Page with console log:


            Vue is like a glue between a UI (subset of DOM elements that are matching UI template) and underlying data. Each instance of Vue binds together UI template with data source in a fully reactive way: as soon as data is changed, matching DOM elements are re-rendered.

            new Vue() creates a (root) instance of Vue app [Creating a Vue Instance]. Its argument is an options object. In the simplest case it has to define two main things: DOM elements and data source.
            • el - provides the Vue instance an existing DOM element to mount on. It can be a CSS selector string or an actual HTMLElement. The provided element merely serves as a mounting point. The mounted element will be replaced with Vue-generated DOM in all cases. It is therefore not recommended to mount the root instance to <html> or <body>. [el]. In our case the Vue instance will be bound to a div element with id "example".
            • data - The data object for the Vue instance [data].
              {{hello}} is a template and hello itself is template variable which gets evaluated into value of the data member with the matching name. Personally, I would have used some different name for this variable like message for example as 'hello' is actually a kind of a message text.
                Let's test reactiveness by modifying the source code by naming the Vue application instance. This will allow us to access and modify its properties from the code or from the browser console.

                Source:


                If we modify data, we can see how text in the bound DOM element changes instantly:


                Vue.js script is downloaded from the URL https://unpkg.com/vue used in script tag. unpkg is a global CDN used for distribution of various JavaScript packages. If you type in the browser the same URL and append a slash to it, you can see the latest available version of that package and its files:

                If we check the Sources tab of our index page, we can see that exactly this version has been downloaded. We didn't specify any particular Vue version in the URL so the latest version was fetched:




                Read the next article in series: "Part 2: Vue CLI and intro in Vue Components"

                Sources:

                The Vue Handbook: a thorough introduction to Vue.js
                A Comparative Study of Progressive JS Frameworks: Angular.js & Vue.js

                No comments: