Looking at the Vue
Download as PPTX, PDF0 likes309 views
The document is a retrospective presentation by Robert MacLean, a veteran full stack software developer, covering a project focused on improving the customer signup process for a large financial services company. It outlines the use of technologies like Vue, TypeScript, and MobX, along with valuable lessons learned and useful advice from the project. Key highlights include the importance of component reuse, the challenges and benefits of managing state, and the testing framework utilized.
Looking at the Vue
- 1. Looking at the Vue A retrospective
- 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)
- 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
- 8. VSCode trick
- 9. Focus on UI + Sharing Code
- 10. UI Idea Content Next/back button Brand + Popup messages
- 14. Routing
- 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
- 21. Managing State
- 27. Pro/Con Loved working with mobx and decorators Might feel a bit too much like magic
- 32. Testing Demo
- 33. Testcafe
- 34. Testcafe
- 35. Testcafe
- 36. Testcafe
- 37. TestCafe Studio
- 39. Bits and pieces
- 40. lighthouse
- 43. Thanks! Any questions? Want more demos?
Editor's Notes
- #5: 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
- #7: , 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
- #13: All the code for a page
- #14: Plumbing on the palette Demo this: console.log("%c[Vue.JS]","color: rebeccapurple; font-weight: bold", "How cool is this?")
- #17: Allowing us to just drop pages into it and have them found and added
- #18: Build up the routes dynamically
- #19: The configure the flow of independently
- #26: Demo for vuex
- #27: Same for mobx
- #28: Decorators
- #30: Use of decorators in the view
- #31: Talk about loading and saving aspects of a page
- #36: TextInput component
- #38: npm install -g testcafe testcafe chrome demoTest.js testcafe chrome,firefox,safari demoTest.js testcafe remote demoTest.js --qr-code import { Selector } from 'testcafe'; fixture`Getting Started`.page`http://devexpress.github.io/testcafe/example`; test('My first test', async (t) => { await t.typeText('#developer-name', 'John Smith').click('#submit-button'); await t.expect(Selector('#article-header').innerText).eql('Thank you, John Smith!'); });