Leave your legacy code behind and go Nuxt

It's almost 2020 and there is still so much legacy code around. We need to start migrating. We need to stop being afraid of the migration process. So let's just do it. Where do we start? how do we do it? I will show you how we did it. How we turned our company's vision to stop working with legacy and start working with Vue and Nuxt. A case study on how we built our client's site, what we used and how we made it as performant as possible and were able to deliver better results to our clients and how now we have left the legacy code behind and have fully gone Nuxt.

Transcript

1. Leave your legacy code behind and go Nuxt
2. Frontend Tech Lead @Patterson Agency in Mallorca Mentor @OpenClassrooms Tech Degree Moderator @Treehouse Contributor @webpack Contributor @Nuxt Writer @Ultimate Courses Teacher @Vue School Debbie O’Brien debs_obrien Debbie O’Brien
3. Too much legacy code Hard to scale Front and backend code mixed together Too many dependencies We have a problem
4. JSF PHP ASP Front and Back mixed together Old Tech stacks
5. Unmaintainable Code <ui:fragment rendered="#{CatalogoBean.campaign.countdown}"> <div style="width:360px;margin:0 auto;margin-top:70px;"> <span style="display:none;" id=“text_days"> <g:get name="listado" anchorid="landing.days" defaulttext="DAYS"/></span> <p id="countdown" style="width:500px;font-size:30px;margin-top:50px;color:#fff;;"></p> </div> </ui:fragment>
6. Bad Performance
7. Nothing Dumping more code on top of it What are we doing about it?
8. No Time No Money Afraid to take the migration step What? Why?
9. Migrating What should we be doing?
10. Piece by piece Break up your project Create and ship Where do we start?
12. Convince yourself then your team then your boss Where do we start?
13. Know your tools Know what your capable of Know what you can deliver Where do we start?
14. Run performance tests to compare Create prototypes Just do it Where do we start?
15. Go Nuxt
16. Patterson Travel: Case Study
17. Separate Front and Back From mixed code in php to Nuxt app on the front Rest Api in the back
18. The JSON war
19. Decide who is responsible for what Header and Footer - Front Content and shopping cart - Back
20. Invest in your team
21. Lead your code Make sure your code looks like it was written by one person
22. Create Standards
23. Pre Commit Hooks: Husky "scripts": { … }, "husky": { "hooks": { "pre-commit": "cross-env PRE_COMMIT=true lint-staged" } },
24. Use Pull Requests
25. Test your code
27. Cypress describe('My First Test', function() { it('clicking "type" navigates to a new url', function() { cy.visit(‘https://nuxtjs.org') cy.contains('type').click() cy.url().should('include', ‘/guide/installation') }) })
28. Vue Testing Library test('increments value on click', async () => { const {getByText} = render(TestComponent) getByText('Times clicked: 0') const button = getByText('increment') await fireEvent.click(button) getByText('Times clicked: 1’) })
29. Use VuePress Document your code
30. Use Hygen Generate your files
31. Think and plan or draw before you write Think first, code later
32. Use Tailwind end of conversation Styles
33. Stop adding big libraries of styles that you never use Stop creating styles for everything Think utilities first Styles
35. Styles
36. Styles
37. Utilities classes === less code to maintain A utility-first CSS framework Styles
38. Add a PWA
39. Or you can Just use Nuxt
40. Registers a service worker for offline caching generates manifest.json file adds SEO friendly meta data generates different size app icons Nuxt PWA
41. Add a PWA in 3 steps yarn add @nuxtjs/pwa 1 { modules: [ '@nuxtjs/pwa', ], } 2 3 upload the image to static folder
42. By default the PWA name === package.json name Set it in Nuxt to be merged with your meta PWA Tips meta: { name: 'Patterson Travel', description:‘Patterson Travel Agency', author: 'Patterson Agency', },
43. Faster Fully Dynamic Hydration process SEO Benefits Build Static Sites
44. Static Site Static generated / pre rendered means pre render the application once during build and serve it as a Single Page Application
45. We have fast network Our page loads fast already Why Care
47. 2 seconds and I’m gone
48. Build sites for everyone
49. nuxt generate Build Static Sites
50. Call the api once at build time Call the payload instead of the api on Navigation Works offline Full Static module
51. Payloads
52. Calling the Payload
53. Full Static Module works offline
54. Use the exclude option Static Site + SPA generate: { fallback: true, exclude: [/booking/] }
55. Pages Folder
57. Dynamic Pages generate: { routes: function () { return axios.get(‘https://my-api/blog') .then((res) => { return res.data.map((post) => { return '/blog/' + post.slug }) }) } }
58. Nuxt Crawler Will crawl all your <nuxt-link> tags and auto generate your dynamic pages at build time
59. Impatient? https://github.com/nuxt/nuxtjs.org/tree/master/modules/static https://github.com/nuxt/nuxtjs.org/tree/master/modules/crawler
60. Be aware of what your shipping Use the wepack analyser Run an audit in chrome dev tools Check your css with CSS Stats Run Performance Tests
61. Analyse your bundle
62. yarn build -a
63. Nuxt gives you code splitting by routes for free But you have to: Code Split your components Improve your code
64. How does Code Splitting work? Ask Sean Larkin
65. Just change this: Code Split your components import TheFooter from ‘~/components/the-footer’ components: { TheFooter, }, components: { TheFooter: () => import(‘~/components/the-footer’), }, to this:
66. locales: [ { code: 'en', iso: 'en-US', name: 'English', file: 'en.js', }, ], lazy: true, langDir: 'i18n/', Lazy Load your translations
67. Lazy load your images yarn add v-lazy-image import Vue from 'vue' import VLazyImage from ‘v-lazy-image' Vue.component('VLazyImage', VLazyImage) plugins: [ '~/plugins/lazy-load-images.js', ],
68. <v-lazy-image src=“https://res.cloudinary.com/idemo/image/upload/ q_auto,f_auto/cloudinary”/> Use Cloudinary for your images
69. Use labels for forms Use aria tags Be careful with colour contrasts Put Accessibility first
70. Chrome dev tools for accessibility Use your tools
71. Modern mode Build two versions of your app: modern bundle: browsers that support ES modules, legacy bundle: targets older browsers that do not "build": "nuxt build --modern", "generate": "nuxt generate --modern",
74. Be proud of your code
76. So what are you waiting for? Do you still have an excuse or are you going to leave your legacy code behind?
78. Thank you
79. Thank you Debbie O’Brien Frontend Tech Lead Consultant Open Source Contributor @debs_obrien https://github.com/debs-obrien/nuxt-boilerplate-project