Learn To VueJS Part I

PUBLISHED ON JAN 25, 2018

Learn To Vue Part 1

Javascript Frameworks are to a web developer what Chalk Brands Unlike Chalk Javascript frameworks come and go at the rate of fruit flies, and picking one to invest your time one is a hard task , because it may be obsolete or just never used by paying parties . This why ReactJS is so succesful having a strong corporate baker Facebook means the software will be updated and supported for a long time ,betting on such framework is the most comfortable choice (remember us humans like comfort zones) but if you notice a pattern among corporate baked framework or tools is that they also force some ideologies or way of doing things like TensorFlow for example , it has a steep learning curve since it enforces an engineering pattern instead of an intuitive one , then there’s Keras & PyTorch :heart: that have an intuitive way of doing things because they are engineered as open-source projects for communities unlike TensorFlow that was engineered for Google engineers , this doesn’t mean you should hate one and cheerish the other I like TensorFlow for it’s good tooling (Serving,TensorBoard…) but when doing research and iterating on many different architectures and ideas I either use Keras for fast prototyping or PyTorch .

Evan You built VueJS to prototype web applications and it’s intuitive design pushed it’s explosive growth and you’ll see why after learning it .

The SPA way of doings things

Let me explain some key concepts that will enlighten the new way of doings things not necessary the best way but the more progressive way .

In the past couple years if you were to build a Web app using the JS stack (Node Mongo Express ) you had to choices you could use Angular (which I never learned or used) or use templates and server side rendering , in other words when the user requests a webpage say browses to www.mywebsite.io/ the express backend will send an HTML page rendered using a context and a template built using (Jade,HandleBars,eJS…) and everything was done this way server side .

The new way of doing things is slightly different , instead of sending a different HTML page for each route (‘/home’,‘/login’,‘/signup’…) the server sends JSON data (most of the time you could use XML but then you would already be in Hell ) .

Example

Old Way :

router.get('/home',function(req,res){
    res.render('home',{ user : 'Panda Boys' })
}

The render function will generate an HTML using a template called home.ejs for example and will replace {{ user }} in that template with ‘Panda Boys’

New Way :

router.get('/home',function(req,res){
    res.json({
        user:'New Panda Boys'
})

The Server sends JSON to the client and the client side built using VueJS or React will consume the data and render it in the page .

In a other words instead of rendering on the server and sending HTML you render on the client and send data in JSON format or XML for the masochists (I don’t judge :innocent: ).

References about the subject that will clear things up :

Comparison of Javascript frameworks

P.S : It pays to learn both ReactJS and VueJS it exposes you to more job offers , functional vs intuitive ? programming , don’t focus on one thing ,have an open-mind

The Opening

VueJS made an amazing jump from v1 to v2 as you can see here Announcing VueJS 2.0 , in the following posts we will use VueJS 2 as it’s the standard .

VueJS is different from ReactJS in two ways that I see are the separators :

  • VueJS has a leaner building flow and easier to learn (No JSX isn’t hard) what I mean is that VueJS uses a separative way to do things > a snippet of code is worth a chapter of words

A VueJS component is built like this :boom: :

Hello-component.vue

<template>
    <div class="hello-message">
        Hi {{ user }}
    </div>
</template>
<style scoped>
.hello-message{
    font-size:30px;
    color:red;
}
</style>
<script>
export default {
    name:'hello-component',
    data(){
        return{
            user : ' Poo The Panda';
        }
    }
}
</script>

Inside your template you have your component HTML wrapped around one dive :exclamation: then you have your components styles (scoped if you want to have the CSS scoped to only your component) and then your script tag that contains your component logic .

Which makes the end app a composing of multiple components .

  • The Second Points is the time needed from 0 to Example : All you need is to to drop this line html <script src="https://cdn.jsdelivr.net/npm/vue"></script> And you can start building your app using the full power of the Vue gods ,but instead of building components like what I showed you up there . You use a slighlty different flow the equivalent of the vue component becomes something like this :

Vue.component('hello-component',{
    template:`<div class="hello-message">
                Hi {{ user }} 
                </div>
               ',
})

let app = new Vue({
    el:'#app',
    data:{
        user : 'Poo The Vicious Panda'
        }
})

With your HTML having a

<div id="app"><hello-component></hello-component></app>

I hope this introduction was enough to show you the Vue way , in the second part I will start by showing you how to build many things and use many Vue nifties .

< prev | post

home