JSFoo Delhi 2020

On component architecture, performance, security for front-end, and emerging trends

Attend

Building Modern Web Apps with Micro Front-End Architecture

Submitted by Kalanithi Sethuraman (@iamnithi) on Apr 10, 2020

Status: Submitted

Abstract

I Will Be Explaining about Migrating Existing Web Applications with the help of Micro Front-End Architecture. As the industry is moving towards Framework Oriented Web Designs we can migrate Framework to Framework without Dismantling the Existing Architecture. As There are diverse in Development frameworks like Angular, React and Vue we can Setup a project where all the frameworks can put in Use by Having a simple Node Engine to Render them all along in the same Page. Communicating Between the Different Frameworks can be done Via a simple State management tool. This Level of Architecture can be monolithic so the concept of component-driven Development can use to their full Extinct. This Architecture Can help large scale industries where migrating from one framework to another can be made simple and more efficient.

Outline

This Talk will be covering about introductions to legacy Application structures and how easy it to migrate to the micro front ends. This Talk is completely based on my previous experience on migrating a complex eCommerce site into scalable micro front ends. The Session will be covered with the following topics.
- Introductions to Micro Front End
- React Based Component Driven Development
- Node as Middleware
- Routing
- Server-Side Rendering
- Building a Common State Management For Component Interaction
Ending the session with a demo to POC built with Micro Front Ends.

Speaker bio

Web Developer with experience in design and developing user interfaces, testing, debugging and training staff within JavaScript technologies. Proven ability in optimizing web functionalities that improve data retrieval and workflow efficiency.

Links

Slides

https://slides.com/kalanithisethuraman/deck

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 }}