Stephen is a Software Architect working as the Frontend Engineering Team Lead at BCaster. Arch Conveyer/Community Manager of CodeAfrique, a not-for-profit weekend intensive software engineering Bootcamp for underrepresented groups in IT which was first started off in Estonia. He’s also a member of the Node.js package maintenance team and a write for Ultimate Courses.
During his free time, Stephen sometimes volunteer as an open-source developer for https://adsbexchange.com, play golf and coach football (soccer as Americans call it).
From JQuery to Vue.js – Not Rocket Science
Time & Date
M. K. Čiurlionio str. 84, Vilnius, Lithuania
Changing applications from one technology to another can turn out to be rather very challenging depending on the type of tech stack. If you’ve ever migrated a large project then you can only imagine how daunting it could be, most especially moving from DOM manipulation stack to a Virtual DOM stack.
After becoming a Front End Engineering Team lead at BCaster I introduced an incremental migration shift from JQuery to VueJs. It sure did seem to be straightforward at first especially with proper test coverage, however 20% -25% into this migration we encountered a certain issues which meant re-evaluation of several architectural decisions that had been made in this regard.
- Part 1: Introduction to Vue:
o Adding Vue to your Legacy Code
o Vue reactivity and Life Cycle
o Migrating Legacy code one page at a time
- Part 2: Moving to Vue Tools:
o Moving To Vue CLI
o Single File Components
o NUXT for Server Side Rendering
- Part 3: Using third party libraries:
o Integrating third party libraries into the project
o Setting up Global vs Page Specific libraries
o Bonus – Using Tailwind with Vue/NUXT
The goal of this workshop is to give a hands on step by step guide and approach for migrating legacy JS or JQuery application into a Vue JS app without needing to use the Vue CLI i.e simply using Node/Espress/Handlebars.
– Vue JS (Latest Release)
– Node JS (LTS)
– Vue Dev Tools extension for Chrome or Firefox
– Basics of DOM Manipulation (Getting values from the Dom, setting input values e.t.c.)