Beyond Helloworld - Real World Vue.js Development Tips

Beyond Hello World: Real World Vue.js Development Tips
Chris Finnigan – Lead Developer @ Newsquest Digital Media

Hi! I’m Chris
I’m a Lead Developer at Newsquest Digital Media
based in Glasgow.
I’ve been a Developer for 22 years.
I have worked in digital agencies, startups and
large corporate companies as well as working on
interesting projects for fun.

About Newsquest
We are one of the largest regional news
publishers in the UK.
●
More than 165 news brands
●
Over 40 magazines, published in print and
online.
●
Almost 30 million users a month online
●
Six million readers a week in print
In addition to our local news brands, we also own:
●
s1
●
Exchange & Mart
●
Newsquest Specialist Media

Choosing Vue.js
2 years ago, following a developer shoot-out with
various front-end frameworks. We decided to use
Vue.js as the framework for a re-engineering of our
existing Jobs Manager Portal.
What we loved
●
Excellent documentation and community
●
Excellent development tools
●
Pro-active core team
●
Painless learning curve
●
Hot Reloading
●
Single File Components
●
Vuex State Management

2 Years on...
2 years on, our decision to adopt Vue.js has really
paid off. We have a large, high performance
application which is a pleasure to develop on every
day.
Some of the benefits we’ve experienced
●
Very fast render times
●
Less code duplication thanks to shared components
●
ES6+ features (Async/Await, Spread etc)
●
Easy to refactor and improve
●
Simplified product design processes
●
Reduced debug time by using shared actions
●
Happy developers

1. Planning
Application Level
●
How is the application structured ?
●
Do we want to use a UI framework ?
●
Do we need multiple application routes ?
●
Do we need to manage application state ?
●
Do we need authentication ?
●
Do we need to communicate with APIs ?
●
Do we need to validate form data ?

1. Planning
Component Level
●
What are the common components in the application ?
●
How will our components communicate ?
●
Will our components share state ?
●
Can we use third party components ?

2. State Management
What is state?
State is just an object that contains the properties
which we want to be shared within our application.
For a very simple stand-alone component, state
management is generally not required.
For applications which contain multiple components
that share state, state management becomes very
important.

2. State Management
Props Down / Events Up (Prop Drilling)
●
Parent component holds application state
●
Parent component sends data by props to it’s child
●
Child components emit events to the parent
●
Parent component handles API calls to store data
While this does technically work, prop drilling is not a
very scalable way of managing state.
As the number of components grows, the number of
props down, events up communications grows.
That’s no fun… There must be a better way!

2. State Management
Vuex
“Vuex is a state management pattern + library for
Vue.js applications. It serves as a centralized store
for all the components in an application, with rules
ensuring that the state can only be mutated in a
predictable fashion.”
●
State: Holds application data.
●
Actions: Used for asynchronous tasks and for
orchestrating multiple mutations.
●
Mutations: Synchronously modify the state.
●
Getters: Used to access values derived from the
state.

2. State Management - Vuex
Benefits
●
Predictable state
●
All components communicate with the store in the
same way
●
Components react to changes in the store
●
Fully integrated into Vue Dev Tools
●
Time travel through mutations history
●
Easier to debug
●
Easy to view the current state of the application
●
Helper functions like mapGetters, mapActions,
mapMutations and mapState reduce lines of code

2. State Management

3. Performance Tweaks
Lazy Loading Routes

3. Performance Tweaks
Lazy Loading Components

Thanks For Listening!
Feel free to get in touch on:
Twitter: @chrisfdev
LinkedIn: https://www.linkedin.com/in/chris-finnigan-b870bb1a/
Email: chris.finnigan@newsquest.co.uk

Beyond Helloworld - Real World Vue.js Development Tips

Recommended

More Related Content

Similar to Beyond Helloworld - Real World Vue.js Development Tips (20)

Recently uploaded (20)

Beyond Helloworld - Real World Vue.js Development Tips