jslovers / proposals Goto Github PK

Overview

How to implement Micro-Frontends architecture using Angular.

Details of Event

Angular code-lab.

1. Need for Micro-Frontends.
2. Pros/Cons
3. How to break existing Monolith
4. Different ways to orchestrate (iframe/WebComponents/Bootstrapping)
5. Sharing data
6. Demo: Products Webapp and Cart Webapp
7. Code-lab (Orchestrating both into single WebApp using WebComponents)
8. Food for thought? (Very simple demo of running Angular and React app in same app)

Few more details

• Total Time: Less than an hour
• Framework & Concepts: Angular 8, Web Components
• Description: How we can orchestrate distributed angular apps as a holistic SPA following micro-frontends architecture.

Codelab

• Is it a codelab?: Yes
• Time of Codelab: 30 mins

First Time Speaker

• I have presented at my current workplace on different concepts but I haven't given an open community talk before.

Last JSLovers Event you attended

• What was the last event by JSLovers you attended: Design Systems from UX to UI
• How was your experience: Very Inspiring
• How can we improve?
  Attending the last event motivated me to come forward and share whatever I have learnt along the way. Please keep organising these amazing events.

Overview

Lazy loading is a procedure that suspends the loading of non-critical resources at page load time, lazy loading of images, which can bring great savings in terms of speed, but it is also easy to execute incorrectly. fetching images and rendering to the client can be done in many ways but people often make lots of mistakes in this section.

Again, I will explain and describe some techniques to "occupy" space for an image before it is loaded, going from just displaying a blank area to displaying a progressive loading from a blurry image, exactly how Spotify, Google, and Facebook achieve this.

Lastly, we would go into analyzing the size of the image which would be rendered to the client using Webpack.

The major key takeaways from this session are, best-practices for fetching and rendering images, using intersession observer, auditing images, best practices in lazy-loading in relation to Spotify, facebook & Google and Analyzing images size using Webpack.

Details of Event

"Pure JS" event for NCR location.

Few more details

• Time of talk: 30 minutes
• JavaScript, ReactJS, Webpack

There are tools in market which code directly from design designed by you in app. What is the possibility and how these apps can be made is really amazing. I want to discuss the possibilities

Overview

Talk revolves around mono-repositories which are independent and yet together. It's an architectural concept for managing multiple workflows together making it easy to manage, interdependent versioning and reuse. Also, the talk includes how we can easily play with UI components and improve their documentation.

Few more details

• Time of talk: 45 min.
• Architecture for frontend repositories
• It will have a small demo of 5-10 min.

First Time Speaker

• Giving it first time on frontend in public community

The presentation and working demo is almost ready. Need to give it a final touch for the event and as per expected crowd competency.