A presentation at Women Who Code DC Meetup in in Arlington County, Arlington, VA, USA by Ben Hong
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
This is a session for all those curious about VueJS and want to learn more about it. We'll talk about what Vue is, how it compares with other frameworks like ReactJS and AngularJS, why you should consider using it on your next project, and much more.
What should you get from this workshop / takeaways:
• Understand what VueJS is and it’s importance in today’s ecosystem • Basic literacy of VueJS and how to interpret code in a Vue App. • Ability to start building your Vue Apps. • Understanding what client-side frameworks. • A roadmap for your learning- Additional tutorialss/resources to continue going.
The following resources were mentioned during the presentation or are useful additional information.
The following code examples from the presentation can be tried out live.
for free. You
can too.