Robert recently completed a large scale project using Vue.js, TypeScript, MobX and other terms to make this very high on Google rankings. Now it is the time for the retrospective, what went well and what did not. This talk is about the front end only and is light on demos, with the focus being on the real system which was built. When you leave, you will have a set of new architectures you can apply to your next web project, regardless if it is Vue, React or Angular.
2. About me
Robert MacLean
Veteran full stack software developer
DevConf & Developer User Group Director
Day job at Equal Experts
3. 31st March 2020
You + 800 of your best friends
5 tracks, over 40 talks
www.DevConf.co.za
4. What are we covering?
It’s a project retrospective
Cover some of what we did and how we did it
Shared some cool things we did
Focus on front end
Useful advice (at least 5 of them)
5.
6. Goal of the project
Domain: Large financial services company
Problem: Signup is hard. Paperwork. Legal
requirements. Manual Steps
Solution: Build a MVP that takes a customer through
signup quickly
Flexibility
Build for reuse (i.e. favour components/isolation)
7. What we used
Vue (duh)
TypeScript
MobX
CSS Framework – Grids; per component CSS 🤕
VSCode
20. Pro/Con
It is awesome to not have to worry about coding
next buttons
Would work great in other aspects too
Maybe over engineered up front… or not enough
Limitations in using an array
Convention over configuration for routing
Using OSM Nominatim
Integrating Google Lighthouse
Using TestCafe
My favourite piece of code
Use of decorators to kill boiler plate code
, so:
Use selfie + proof of presence to tick legal requirements
Mobile first web experience that embraces what is available to mitigate typing
Hide the slow backends using smart UX
All the code for a page
Plumbing on the palette
Demo this:
console.log("%c[Vue.JS]","color: rebeccapurple; font-weight: bold", "How cool is this?")
Allowing us to just drop pages into it and have them found and added