Looking at the Vue
•Download as PPTX, PDF•
0 likes•304 views
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.
Recommended
Recommended
More Related Content
Similar to Looking at the Vue
Similar to Looking at the Vue (20)
More from Robert MacLean
More from Robert MacLean (20)
Recently uploaded
Recently uploaded (20)
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
- 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
- Build up the routes dynamically
- The configure the flow of independently
- Demo for vuex
- Same for mobx
- Decorators
- Use of decorators in the view
- Talk about loading and saving aspects of a page
- TextInput component
- 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!'); });