DevDays Moscow 2021 Online Edition

Kenigbolo Meya Stephen

Должность: Software Engineer

Компания: BCaster

Страна: Finland


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, play golf and coach football (soccer as Americans call it).


From JQuery to Vue.js — Not Rocket Science

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.

Целевая аудитория

The workshop is suitable for both beginners and intermediates alike. JavaScript enthusiasts who are excited about learning Vue and would prefer a step by step introduction to Vue JS will find this useful.

Технические требования


—        Vue JS (Latest Release)

—        Node JS (LTS)

—        Vue Dev Tools extension for Chrome or Firefox

Technical Knowledge:

—        Basics of JavaScript (Functions, Variables, Conditional statements etc.)

—        Basics of DOM Manipulation (Getting values from the Dom, setting input values e.t.c.)

« Назад