Vue.JS Hello World

Editor's Notes

• #3: Hello & Welcome Fire & Safety Running through the Agenda
• #4: 3 key differentiators in the Manchester market: Building a new team from scratch – this transformation started last year and already formed 3 new teams. We believe we are investing in the latest tech and tonight hopefully demonstrates this. And finally, we aspire to save households money (over 2 billion last year). If truth be told, finding good people with VueJS experience in the North West doesn't exist. So, we went out to Market to find the best front-end Developers we could and we had frank conversation around MSM using VueJS. Safe to say we didn’t do too bad.   As a result, we asked ourselves the question how do we help support the growth of this tech in the Manchester community. The answer was obvious. We wanted to set up a view meetup but also promote our tech and business to share some of the great stuff we are doing.   On behalf of the MoneySuperMarket Team (you will notice the people with the lanyards) we hope you enjoy the complimentary drinks and snacks but more importantly the main event which I will now handover to Emanuell to take you through our demo.
• #5: How many of you have used VueJS?
• #6: Unfortunately, this is the state of the Front End and is not looking like it’s going to get any easier. Choosing a new framework can be daunting with so many options there. For this reason, many either prefer to stick with jQuery or pick other libraries or frameworks they are familiar with. However, going with what you know doesn’t guarantee performance, scalability, maintainability and progression and innovation.
• #7: CMS re-platforming over the course of the last 3 years with AngularJS as framework of choice. Some AngularJS implementations were problematic and needed a re-write. Thankfully, we knew we did not want to go with AngularJS so we have excluded one big player straight from the start
• #8: Main focus is on the mobile journey. But there’s still a lot going on between ReactJS and VueJS and thus, we chose to dive in and spike them out separately instead of going with the public’s pick. VueJS almost acts as a bridge between AngularJS and ReactJS, picking concepts from both technologies while looking to simplify them. Thus, getting a Developer to move from Angular or React to Vue will be much simpler than going from Angular to React or vice versa. Empowered and trusted to spike these given more than hours or days but weeks.
• #9: Reasons behind this in the next slide.
• #10: Virtual DOM updates everything in memory which is a way quicker process. Coming from an AngularJS background it was VERY fast to get started with and to start building something meaningful with. Single File Components that aren’t JSX, really clean code. React’s license was initially problematic for us (not the case any more) Highly performant (considered faster than React) especially when coupling it with PWA technique
• #11: There are some challenges: - VueJS not as popular yet as React - Difficulties in finding resources out there - May have to innovate - Not for too long though VueJS is getting traction. More and more developers switching to it from various other libraries.
• #13: HTML template at the top with the VueJS instance at the bottom and the result rendered on the right hand side. VueJS acts as the middle man (stores the template in the memory and does the necessary work to convert it into what is eventually rendered).
• #15: Similarly, you can call functions using string interpolation. However, to access properties from your data object, you would have to use ”this”.
• #17: A directive can be described as an instruction which takes an argument and a property, in our case ”href” and “link”. NOTE: You cannot use string interpolation inside HTML attributes but only in-between HTML tags where you would usually have regular text.
• #19: Another example of a directive is “v-on” which again takes an argument and a property. On click, this triggers the “updateCounter” function which increments the ”counter” property by 1. Should you want to, you can pass your own argument, say “2” and chose to increment by that instead. Moreover, you can also listen to keyboard events as well.
• #21: Simple JavaScript statements can be executed in the HTML template.
• #23: ”v-model” listens to changes and updates them accordingly in the instance and reflects that change in all places where the property is used.
• #25: Methods behave differently than computed properties. In the above example, the “result” function will get triggered on each button click as it is not aware whether or not the “counter” and “secondCounter” properties are dependent to its calculations. Computed properties are smart enough to first analyse the code and then trigger it should the result be dependent on the action. NOTE: computed properties only run synchronously.
• #27: Storing this into a new variable “vm” so we can access it in the callback function.
• #29: “v-if” completely attaches and detaches elements from the DOM. “v-if” will also attach nested elements or detach them accordingly. An alternative would be using “v-show” and/or “v-hide” which keeps the elements rendered on the pages but hides them using CSS (e.g. “display: none”).
• #34: It it possible to have multiple instance. It’s also possible to access one another from outside.
• #36: A component takes a selector and an object. A component extends the Vue instance. Thus, in a component you want to have your ”data” as a function rather than an object not to interfere with the ”data” from your instance. Components are reusable, instances are not.
• #38: Communication between child and parent can happen through an event bus which emits an event from the ”Child” that the “Parent” listens to and picks it up.
• #41: Routing features: - Modes: hash vs history - Child routes - Transitions - Guards
• #45: Benefits: not having to go through React’s hooks not having a complex setup with controllers etc (Angular) easy to get started with vue-cli
• #48: Topics for next meetups: VueJS Amsterdam Unit Testing with Jest Validation with VeeValidate CSS with Vue Possibly Routing and Vuex Guest speakers