A presentation at VueConfTO in in Toronto, ON, Canada by Debbie O'Brien
Leave your legacy code behind and go Nuxt
Debbie O’Brien Frontend Tech Lead @Patterson Agency in Mallorca Mentor @OpenClassrooms Tech Degree Moderator @Treehouse Contributor @webpack Contributor @Nuxt Writer @Ultimate Courses Teacher @Vue School debs_obrien Debbie O’Brien
We have a problem Too much legacy code Hard to scale Front and backend code mixed together Too many dependencies
Old Tech stacks JSF PHP ASP Front and Back mixed together
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>Bad Performance
What are we doing about it? Nothing Dumping more code on top of it
What? Why? No Time No Money Afraid to take the migration step
What should we be doing? Migrating
Where do we start? Piece by piece Break up your project Create and ship
Where do we start? Convince yourself then your team then your boss
Where do we start? Know your tools Know what your capable of Know what you can deliver
Where do we start? Run performance tests to compare Create prototypes Just do it
Go Nuxt
Patterson Travel: Case Study
Separate Front and Back From mixed code in php to Nuxt app on the front Rest Api in the back
The JSON war
Decide who is responsible for what Header and Footer - Front Content and shopping cart - Back
Invest in your team
Lead your code Make sure your code looks like it was written by one person
Create Standards
Pre Commit Hooks: Husky “scripts”: { … }, “husky”: { “hooks”: { “pre-commit”: “cross-env PRE_COMMIT=true lint-staged” } },
Use Pull Requests
Test your code
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’) }) })
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’) })
Document your code Use VuePress
Generate your files Use Hygen
Think first, code later Think and plan or draw before you write
Styles Use Tailwind end of conversation
Styles Stop adding big libraries of styles that you never use Stop creating styles for everything Think utilities first
Styles
Styles
Styles Utilities classes === less code to maintain A utility-first CSS framework
Add a PWA
Or you can Just use Nuxt
Nuxt PWA Registers a service worker for offline caching generates manifest.json file adds SEO friendly meta data generates different size app icons
Add a PWA in 3 steps 1 yarn add @nuxtjs/pwa 2 { modules: [ ‘@nuxtjs/pwa’, ], } 3 upload the image to static folder
PWA Tips By default the PWA name === package.json name Set it in Nuxt to be merged with your meta meta: { name: ‘Patterson Travel’, description:‘Patterson Travel Agency’, author: ‘Patterson Agency’, },
Build Static Sites Faster Fully Dynamic Hydration process SEO Benefits
Static Site Static generated / pre rendered means pre render the application once during build and serve it as a Single Page Application
Why Care We have fast network Our page loads fast already
2 seconds and I’m gone
Build sites for everyone
Build Static Sites nuxt generate
Full Static module Call the api once at build time Call the payload instead of the api on Navigation Works offline
Payloads
Calling the Payload
Full Static Module works offline
Static Site + SPA Use the exclude option generate: { fallback: true, exclude: [/booking/] }
Pages Folder
Dynamic Pages generate: { routes: function () { return axios.get(‘https://my-api/blog’) .then((res) => { return res.data.map((post) => { return ‘/blog/’ + post.slug }) }) } }
Nuxt Crawler Will crawl all your <nuxt-link> tags and auto generate your dynamic pages at build time
Impatient? https://github.com/nuxt/nuxtjs.org/tree/master/modules/static https://github.com/nuxt/nuxtjs.org/tree/master/modules/crawler
Run Performance Tests Be aware of what your shipping Use the wepack analyser Run an audit in chrome dev tools Check your css with CSS Stats
Analyse your bundle
yarn build -a
Improve your code Nuxt gives you code splitting by routes for free But you have to: Code Split your components
How does Code Splitting work? a e S Ask n i k r a L n
Code Split your components Just change this: import TheFooter from ‘~/components/the-footer’ components: { TheFooter, }, to this: components: { TheFooter: () => import(‘~/components/the-footer’), },
Lazy Load your translations locales: [ { code: ‘en’, iso: ‘en-US’, name: ‘English’, file: ‘en.js’, }, ], lazy: true, langDir: ‘i18n/’,
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’, ],
Use Cloudinary for your images <v-lazy-image src=“https://res.cloudinary.com/idemo/image/upload/ q_auto,f_auto/cloudinary”/>
Put Accessibility first Use labels for forms Use aria tags Be careful with colour contrasts
Use your tools Chrome dev tools for accessibility
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”,
Be proud of your code
So what are you waiting for? Do you still have an excuse or are you going to leave your legacy code behind?
Thank you
Thank you Debbie O’Brien Frontend Tech Lead Consultant Open Source Contributor https://github.com/debs-obrien/nuxt-boilerplate-project @debs_obrien
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.
