Download to read offline
Uploaded byRobert MacLean
Looking at the Vue
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.
More Related Content
More from Robert MacLean
Looking at the Vue
- 1. Looking at theVue A retrospective
- 2. About me Robert MacLean Veteranfull 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 wecovering? 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 theproject 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.
- 9. Focus on UI+ Sharing Code
- 10. UI Idea Content Next/back button Brand+ Popup messages
- 11.
- 14.
- 20. Pro/Con It is awesometo 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.
- 27. Pro/Con Loved working withmobx and decorators Might feel a bit too much like magic
- 28.
- 29.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43. Thanks! Any questions? Wantmore 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!'); });