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