JSFoo: VueDay 2019

A day spent discussing Vue.js, developments in the Vue ecosystem and component architecture

Approaches to structuring Vue components

Submitted by Gaurav Joshi (@gauravjoshi) on May 14, 2019

Section: Crisp talk (20 mins) Technical level: Intermediate Status: Rejected

Abstract

VueJS is a very powerful framework as it brings together the goodness of Angular 1.x and other modern developments from the world of JavaScript. I would like to showcase how we have successfully been able to adopt VueJS and integrate it as a critical component in our existing Adobe AEM-based architecture.

Key takeaways for the audience will be tips, tricks and learnings that will help them in adopting Vue JS in their large scale projects and how we overcame the challenges faced while integrating Vue in CMS based architecture(s) and other legacy apps.

Outline

Introduction
Typical architecture of a medium to large scale AEM project (single page app and multi-page app)
Problems of using Adobe AEM with other frameworks like Angular, React, ES6 or jQuery etc.
How VueJS comes to the rescue
Integrating the good parts of modern JS to legacy systems
Structuring Vue inside existing projects
Make static and dynamic components work in harmony
Make Vue and Non-Vue Components work in harmony
Communication between components (Vuex vs EventBus vs CustomEvents - what to use in specific use cases)
Challenges and how to overcome inter-framework compatibility issues
Gotchas and Caveats
Tips and Tricks

Requirements

The participants should have a very basic idea about what Content Management Systems do.

Speaker bio

Gaurav Joshi is working as Manager Experience Technology at PublicisSapient and is a huge fan of VueJs. He has been working on Vue since early 2018 and has delivered large scale projects using VueJS and also migrated jQuery based projects by adopting Vue in the existing Adobe AEM based project architecture.

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('You need to be a participant to comment.') }}

{{ formTitle }}
{{ gettext('Post a comment...') }}
{{ gettext('New comment') }}

{{ errorMsg }}