Download to read offline
Beyond Helloworld - Real World Vue.js Development Tips
- 1. Beyond Hello World:Real World Vue.js Development Tips Chris Finnigan – Lead Developer @ Newsquest Digital Media Beyond Hello World: Real World Vue.js Development Tips Chris Finnigan – Lead Developer @ Newsquest Digital Media
- 2. 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.
- 3. Beyond Hello World:Real World Vue.js Development Tips Chris Finnigan – Lead Developer @ Newsquest Digital Media 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
- 4. Beyond Hello World:Real World Vue.js Development Tips Chris Finnigan – Lead Developer @ Newsquest Digital 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
- 5. Beyond Hello World:Real World Vue.js Development Tips Chris Finnigan – Lead Developer @ Newsquest Digital Media 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
- 6. Beyond Hello World:Real World Vue.js Development Tips Chris Finnigan – Lead Developer @ Newsquest Digital Media 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 ?
- 7. Beyond Hello World:Real World Vue.js Development Tips Chris Finnigan – Lead Developer @ Newsquest Digital Media 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 ?
- 8. Beyond Hello World:Real World Vue.js Development Tips Chris Finnigan – Lead Developer @ Newsquest Digital Media 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.
- 9. Beyond Hello World:Real World Vue.js Development Tips Chris Finnigan – Lead Developer @ Newsquest Digital Media 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!
- 10. Beyond Hello World:Real World Vue.js Development Tips Chris Finnigan – Lead Developer @ Newsquest Digital Media 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.
- 11. Beyond Hello World:Real World Vue.js Development Tips Chris Finnigan – Lead Developer @ Newsquest Digital Media 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
- 12. Beyond Hello World:Real World Vue.js Development Tips Chris Finnigan – Lead Developer @ Newsquest Digital Media 2. State Management
- 13. Beyond Hello World:Real World Vue.js Development Tips Chris Finnigan – Lead Developer @ Newsquest Digital Media 3. Performance Tweaks Lazy Loading Routes
- 14. Beyond Hello World:Real World Vue.js Development Tips Chris Finnigan – Lead Developer @ Newsquest Digital Media 3. Performance Tweaks Lazy Loading Components
- 15. Beyond Hello World:Real World Vue.js Development Tips Chris Finnigan – Lead Developer @ Newsquest Digital Media 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