@vueschool_io
vueschool.io
Maximizing Vue.js Potential
A Workshop for Tech Leads and Engineering Managers
Glad you're here!
👋
Daniel Kelly
Teacher @ Vue School
Full Stack developer (10 years)
Husband and Father
Not our typical workshop
Not our typical workshop
👨🏫 Instruction
💬 Questions
👩💻 Hands-on Exercises
(10 - 20 mins)
(0 - 10 mins)
(15 - 30 mins)
📺 Solution
(5 - 10 mins)
Not our typical workshop
👨🏫 Instruction
💬 Questions
👩💻 Hands-on Exercises
(10 - 20 mins)
(0 - 10 mins)
(15 - 30 mins)
📺 Solution
(5 - 10 mins)
❌
Has anyone been to one of our workshops before?
🤔 Just curious
👍 Thumbs up if you have
Geared towards engineering managers and tech leads
(not everyday coders)
this workshop is
Will NOT walk away with new coding
knowledge
Instead
learn how to stay cutting edge
Anyone know how I created this image?
If you were expecting one of our traditional workshops and aren't interested feel free to drop off
👋
Thanks for dropping by!
For everyone else though...
So why stay cutting edge?
Web tech moves fast ⚡️
Less than 10 years ago Vue didn't even exist
My oldest child is older than the tech I stake my livelihood on!
But the evolution of the internet is a good thing
Be this guy
Not this guy
When we lead the pack in adopting the latest tech we...
Value Better Performance
✅ Better user experience
✅ Improved search engine rankings
✅ Higher conversion rates
Value Improved Security
✅ Threats evolve, we must as well
✅ protect users and their confidence in you & your product
Put our User's First
✅ Keep up with latest trends in design and device capabilities
Gain Competitive Advantage
✅ By creating more advanced and
innovative websites that stand out from
the crowd.
Future-Proof Our Apps
✅ It's easier to keep up one step at a time
What is cutting edge Vue today?
What is cutting edge Vue today?
- Vue version 3
- Composition API with script setup
- Composables for re-usable stateful logic
- TypeScript
- Vite - ⚡️ fast dev server
- Vitest - ⚡️ fast unit testing
- Pinia - intuitive state management
- Nuxt 3 - fullstack apps, with hybrid routes
Vue Version 3
Increased Performance
- ~55% faster overall
- updates up to 33% faster
- memory usage ⬇ 54%
Improved Feature Set
- Composition API
- Suspense
- Teleport
- & more!
Future Support
Vue 2 will reach End of Life (EOL) on December 31st, 2023
🔮
Official Migration Guide
https://v3-migration.vuejs.org/
Vue 2 3 Workshop
- Intro to Vue 3
- Benefits of Vue 3
- Improvements to Existing Features
- Removed Features
- New Features
- Composition API (overview)*
- Teleport
- State Driven CSS*
- Other CSS Enhancements
- Emits Declaration
- Suspense
- Changes in the Ecosystem
- Migration
Email us for more info
team@vueschool.io
Composition API
Script Setup
Better dev experience with writing composition API
Improved Code Re-use
Re-use stateful logic across multiple components
Off the Shelf
Composables
Libraries like VueUse provide plug-and-play functionality
Official Docs Make Learning CAPI Easy
Video Courses
Composition API Workshop
-
Essential Composition API syntax and functions
- Script setup
- When and how you should use the Composition API
- Using composition functions for logic re-use
- Organizing code by feature
- Using 3rd party composables
- Lifecycle Hooks with the Composition API
Email us for more info
team@vueschool.io
TypeScript
Robust Error Prevention
Surface errors in your IDE as you develop as opposed to at runtime
Refactoring Safety Net
Encourage healthy refactors by making them less risky to carry out
Autocomplete
Superpowers
Improve DX and efficiency while simultaneously reducing surface area for errors
Video Courses
Typescript + Vue
Workshop
- Typing reactive data
- Typing computed props
- Typing props and events
- Typing template refs
- Typing provide inject
- Hands on refactoring exercise
Email us for more info
team@vueschool.io
Vite
Lightening Fast HMR
Quicken feedback loop for improved efficiency and concentration
Lightening Fast Dev
Server Startups
Get started with your day without distractions
Active Community
Find plugins for almost any need from a community that's not just Vue Devs
Video Course
Migration Article
Vitest
The Speed of Vite
for Testing
Reuse Vite's config, transformers, resolvers, and plugins
Familiar Syntax
Write expectations, snaphots, mocks and so on like in Jest.
Video Course
Taught by
Anthony Fu
Pinia
Intuitive to Use
State management without the extra cognitive load of Vuex
Less Verbose
Mutations are no more! 🎉
Video Course
State Management with Pinia Workshop
- Understanding global state management
- Creating a Pinia store with core features like: state, actions, and getters
- Consuming a store in components
- Organizing the store with modules
- Usage with the Composition API and the Options API
- Preserving state with HMR
- Using composables in the Pinia state
Email us for more info
team@vueschool.io
Nuxt 3
Developer Conventions
Remove analysis paralysis with built in conventions for file structure and more
Developer Conveniences
Auto imports, file based routing, common utilities, and more
Full Stack Apps
Server side rendered pages and even REST API endpoints, all in a single Vue project
Video Course
Nuxt 3 Fundamentals Workshop
- What is Nuxt?
- File based routing
- Auto imports
- Middleware
- Layouts
- Data fetching
- Module Discovery and Use
- Server API routes
- Hybrid rendering
- Deployment
Email us for more info
team@vueschool.io
Nuxt 2 3 Workshop
- What's new in Nuxt 3
- What's changed since Nuxt 2
- Data Fetching in Nuxt 3
- State Management in Nuxt 3
- Nuxt 3 best practices
- Error Handling in Nuxt 3
- Migrating from Nuxt 2 -> 3
Email us for more info
team@vueschool.io
Now you know
or rather you're aware
(if you weren't already)
🤔 Another curiosity question
Which of these are you already familiar with or have already adopted?
🙏 Let's do a few polls
Being aware or even knowing how the tech works isn't enough
How do you empower your team?
- to know which technologies are worth adopting
- to adopt the ones right for your team
- to be ready for tomorrow's technologies
Rule #1
You must have a plan!
Being cutting edge doesn't "just happen"
You make it happen
✅ foster growth DURING work hours
✅ carve out time
• put it in your calendars
• add it to your sprints
✅ set aside money
• include it in your budgets
Rule #2
Get buy-in by empowering
not telling
Tell me if this sounds familiar
- You hear about a great new technology - Supabase for Example
- you do the research and find it's a great fit for project x coming up -
Your new customer portal - you announce to the team you'll be using Supabase
- 😢 nobody is happy...
How can we make this story great for everyone?
The key is encouraging bottom up innovation
(alongside the top down innovation)
When everyone has a level of decision making power, they feel like product owners
How do you encourage bottom up innovation?
Schedule "Individual Innovation Time"
- Let devs experiment with what interests them (Let them play! 🚂)
- Use for experimenting, researching, or consuming education material
- Not directly related to core products
- 3 - 6 hours a week
(Remember Google's 20% time policy?) - Often ends up inspiring choices for your product
Ideas
for "Individual Innovation Time"
Video Courses
📺
Video Courses
Vue Specific Resources
Video Courses
Vue Specific Resources
Other Resources
Hackathons
👩💻🧑💻
Hackathons
Vue Specific Resources
Hackathons
Vue Specific Resources
Other Resources
Workshops
🏋️🏋️♀️
Workshops
Vue School Workshops
Workshops
Official Nuxt 3 Migration Workshop
- read blog articles
- write blog articles
- try building something with help of ChatGPT
- try building something with the ChatGPT API (Open AI Chat API: GPT-4)
- Search for coding challenges on topics you're interested in
- Give an afternoon off a month in order to join a meetup, etc
Other Ideas
for "Individual Innovation Time"
Internal "TED Talks"
- Provide an outlet for devs to share what they learned during "Individual Innovation Time"
- Doesn't have to be overly formal or regularly scheduled
- But can be! ^
- Make known it's available for when a dev learns something especially exciting they want to share
- Can be added to the end of a sprint meeting every once in a while
- Also provide time for Q&A and open discussion
Internal Hackathons
- Drum up some healthy competition with a team or company wide hackathon
- Annual Innovation Challenge
- Team up individuals across different teams
- Compete to create a new product or service, streamline a process, etc
- Give 2 days to put together a plan and presentation
- Compose a panel of judges from the executive team and give prizes
Rule #2
Summary
- empowered team members are productive team members
- supply time for self-growth and sharpening
- Utilize video courses, hackathons, and workshops
- Share innovative info via mini TED talks and internal hackathons
Rule #3
Know where to find relevant news
Follow the right people on social media
News
Follow @vuejs on Twitter
By folowing @vuejs
In the past 6 months you would have heard about
Nuxt Devtools
In the past 6 months you would have heard about
Updates to Volar
By folowing @vuejs
In the past 6 months you would have heard about
An easy way to turn mixins into composales
By folowing @vuejs
In the past 6 months you would have heard about
Nuxt Server Only Components
By folowing @vuejs
News
Follow @youyuxi on Twitter
In the past 6 months you would have heard about
Ease of migrating from Jest to Vitest
By folowing @youyuxi
In the past 6 months you would have heard about
What are signals?
By folowing @youyuxi
In the past 6 months you would have heard about
OpenAI.com is built with Vue/Nuxt!
By folowing @youyuxi
In the past 6 months you would have heard about
Improved TS defineEmits
By folowing @youyuxi
And it's not just on Twitter!
Mastadon and LinkedIn is growing in popularity among the developer community
Github is actually a great place to follow others as well. Can see latest open source tech they are working on
Attend conferences
If you had attended Vue.js Amsterdam earlier this year you would have learned that....
Reactivity Transform Is No More
Vapor Mode is Coming Q4
If you attend Vue Conf US in May
you could learn about...
Can't make in person conferences?
Can't make in person conferences?
Vue.js Nation
Nuxt Nation
Watch Key Github Repos
Follow RFCs
Occasionally Check Discord and Github Discussions
Sign-up for Newsletters
😳 And actually read them
Rule #3
Summary
- follow key community members and resources on social media
- attend conferences (in person and/or remote)
- Watch repos of tools you use and their RFCs
- Read newsletters
Rule #4
Measure Results
It's important to know your efforts are paying off!
It's important to know your efforts are paying off!
- cut things that aren't producing results
- justify time spent to superiors
- boost team moral
Ideas for Measuring Results
- conduct regular employee satisfaction surveys
- conduct regular stakeholder satisfaction surveys
- regularly test software performance and compare results year to year
- regularly collect conversion data and compare month to month
- regularly collect turnover data and compare month to month
Ideas for Measuring Results
Are you a team that's new to Vue.js?
🤔
Ideas for Measuring Results
BTW
if you are a newer Vue team,
we offer consulting services and hire out freelance devs to help you out!
Conclusion
Conclusion
- It's important to stay cutting edge in the web development world
- Some cutting edge tech in the Vue.js ecosystem is:
- Vue 3
- TypeScript
- Vite
- Vitest
- Pinia
- Nuxt 3
Conclusion
- Sharing the innovation mindset with your team is important
- Empower them to stay cutting edge through educational resources and time to be creative and collaborative
- Stay ahead of the curve by monitoring relevant news sources
- Measure results to know what works for your team and cut what doesn't
General Q&A
❓
⏰ 15 - 20 minutes