CODING WORKSHOP VUE.JS 101 GETTING SETUP WIFI Repo: http://bit.ly/2qGa0C6 Network: TPGuest CodeSandbox: http://bit.ly/2HsBsxu Password: #1politics

LET’S GET STARTED! VUE.JS INTRO

WHAT ARE CLIENT-SIDE FRAMEWORKS?

WHAT ARE CLIENT-SIDE FRAMEWORKS? ALLOW YOU TO TAKE CONTROL OF YOUR SITE’S USER EXPERIENCE Ben Hong

MOST POPULAR FRAMEWORKS

MOST POPULAR FRAMEWORKS

ANGULAR OVERVIEW + Developer and maintained by Google + Easy to get something up and running pretty quickly — Most of what was happening seemed like magic — More opinionated on how you should built your app

MOST POPULAR FRAMEWORKS

REACT OVERVIEW + Developed by Facebook and recently granted an MIT license + Great performance due to the use of the virtual DOM + You got a lot better at vanilla JavaScript really quickly — Just getting started had a high learning curve — Unfriendly to non-JavaScript developers — High pace of development resulting in unexpected bugs

MOST POPULAR FRAMEWORKS

COMPARING FRAMEWORKS Angular React Founded By Google Facebook How Opinionated? Opinionated Flexible Learning Curve Easy to start Hard to master Hard to start Intermediate to master Template ngHTML JSX GitHub Stars 93.4k (62% v1)* 93.6k* *As of April 16th, 2018

NG-HTML EXAMPLE

JSX EXAMPLE

COMPARING FRAMEWORKS Angular React Founded By Google Facebook How Opinionated? Opinionated Flexible Learning Curve Easy to start Hard to master Hard to start Intermediate to master Template ngHTML JSX GitHub Stars 93.4k (62% v1)* 93.6k* *As of April 16th, 2018

COMPARING FRAMEWORKS *As of April 11th, 2018

Credit - xkcd: Standards (https://xkcd.com/927/)

COMPARING FRAMEWORKS *As of April 11th, 2018

COMPARING FRAMEWORKS *As of April 11th, 2018

VUE OVERVIEW + Open-source framework with no corporate influence + Takes the best of both worlds and bring them together + It does not alienate non-JavaScript developers + Great performance that is on par if not better than React.js + Flexible and accommodating to how you prefer to build apps — No corporate backing and has a “smaller” community compared to React / Angular

COMPARING THE TOP 3 FRAMEWORKS Angular React Vue Founded By Google Facebook Evan You How Opinionated? Opinionated Flexible Guidance as needed Learning Curve Easy to start Hard to master Template ngHTML JSX vHTML (optional) GitHub Stars 93.4k (62% v1)* 93.6k* 91k* Hard to start Easy to start Moderate to master Moderate to master *As of April 18th, 2018

WHICH FRAMEWORK SHOULD YOU CHOOSE?

IT DEPENDS

CHOOSE VUE

AN OVERVIEW OF VUE.JS BASICS

AN INSTANCE OF VUE.JS

EXPRESSIONS IN VUE.JS

CODING EXERCISE THAT WAS EASY!

LET’S TALK ABOUT DIRECTIVES

Directives are the part of Vue.js that are a bit magical…

VUE.JS BASICS: DIRECTIVES WHAT ARE DIRECTIVES EXACTLY? They are Vue specific syntax that flow you to accomplish common goals without worrying about how it is implemented ▸ v-if ▸ v-for ▸ v-else-if ▸ v-bind ▸ v-else ▸ v-on ▸ v-show ▸ v-model

DIRECTIVES: V-IF / V-ELSE-IF / V-ELSE V-IF / V-ELSE-IF / V-ELSE Allows you to determine whether an element on the page should exist

DIRECTIVES: V-SHOW V-SHOW Allows you to determine whether an element on the page should be visible VS V-IF / V-ELSE-IF / V-ELSE Allows you to determine whether an element on the page should exist

DIRECTIVES: V-FOR V-FOR Allows us to “render a list of items based on an array (or object).”

DIRECTIVES: V-BIND V-BIND Allows us to manipulate HTML attributes with dynamic data

DIRECTIVES: V-ON V-ON Allows us to attach methods to HTML elements when a certain event occurs

DIRECTIVES: V-MODEL V-MODEL Allows us to use two-way binding

ENOUGH TALKING. LET’S SEE SOME CODE!

CODING EXERCISE HARRY POTTER WORLD

CODING EXERCISE BASIC CALCULATOR

CODING WORKSHOP VUE.JS 101 GETTING SETUP Repo: http://bit.ly/2qGa0C6

GETTING SETUP http://www.github.com/bencodezen

AS WE COME TO A CLOSE… FINAL THOUGHTS

#1. ACCESSIBLE TO DEVELOPERS OF PRETTY MUCH ALL ABILITIES

JSX EXAMPLE

SINGLE FILE COMPONENT (SFC)

#2. THEIR DOCS ARE ONE OF THE BEST OUT THERE

VUE.JS DOCS https://vuejs.org/v2/guide/

#3. IT IS THERE WHEN YOU NEED IT AND THEN IT GETS OUT OF YOUR WAY.

VUE.JS STYLE GUIDE https://vuejs.org/v2/style-guide/

WHY VUE.JS? VUE.JS IS THE MOST COMPASSIONATE FRAMEWORK IN THE MARKET RIGHT NOW. Ben Hong

WHY VUE.JS? GIVES ME WHAT I WANT WHEN I NEED IT, AND THEN IT GETS OUT OF MY WAY. Sarah Drasner

NEXT STEPS… SO WHAT ELSE IS THERE TO LEARN ABOUT? ▸ State Management ▸ Watch Property ▸ Animations ▸ Component Props ▸ Custom Events ▸ Lifecycle Hooks ▸ Computed Properties ▸ Mixins ▸ Managing CSS in Vue.js ▸ Filters ▸ Slots ▸ And much more!

NEXT STEPS… WHAT OTHER RESOURCES DO YOU RECOMMEND? Paid ▸ Udemy: Vue.js 2 - The Complete Guide ▸ Frontend Masters: Introduction to Vue.js Free ▸ Official Vue.js Guide ▸ VueDC: VueJS 101: The Essentials ▸ VueDC Meetups

Q&A

@BENCODEZEN