Using legacy code with micro frontends
Download as pptx, pdf2 likes279 views
Ran Wahle discusses using micro frontends to integrate legacy code into a modern single page application (SPA) in a peaceful way. A demo is shown integrating three sample applications - one using jQuery, one using Angular 6, and one using Angular 5 and Firebase. Micro frontends allow each application to have its own URL routing and inner routing while reusing backend services. Wrapping applications as custom elements is also discussed as an alternative to iframes for less isolation while still maintaining independence. The talk concludes that micro frontends can help extend legacy code and blend applications together to achieve "world peace" between new and old approaches.
1 of 28
Download to read offline
Ad
Recommended
Pwa is the future. The Presentation I gave at PWA event
Pwa is the future. The Presentation I gave at PWA eventAhmed Kaludi Progressive Web Apps (PWAs) started gaining popularity around 2007 with the launch of the iPhone and advances in HTML5. While early mobile operating systems supported embedded web apps, technical limitations prevented high quality experiences. PWAs address these issues using technologies like service workers, manifest files, and app shells to deliver app-like experiences through the web. They provide benefits like being always up-to-date through background syncing, working offline, and feeling like native apps through features like home screen installation. Many companies see increases in engagement, conversion rates, and reduced load times and bouncing by implementing PWAs.
Addon sdk content scripts
Addon sdk content scriptsIrvin Chen This document discusses using content scripts with the Add-on SDK. It provides instructions for creating a content script by uploading jQuery, creating a JS file, and hooking them up in the main.js file. It also mentions that a strange bug only accepts specific jQuery versions and non-minified libraries. Finally, it recommends checking the Mozilla Add-ons blog for information on SDK API functions needed by content scripts.
Spawny: A New Approach to Logins
Spawny: A New Approach to LoginsSamsung Open Source Group Spawny is a new approach to login capabilities that aims to unify the workflow for developers and users. It provides a text-mode greeter that can be used as a fallback and has no dependencies. Spawny can also be used as a subproject in other projects to set a default greeter. Future goals include monitoring greeter hangups, adding secure lockscreen capabilities, and supporting fingerprint readers.
Deccan ruby-conf-talk
Deccan ruby-conf-talkprchaudhari 1. The document discusses CRUDActions, a Ruby on Rails module created by the speaker to optimize API development by reducing duplication across controllers and allowing APIs to be highly flexible and dynamic.
2. CRUDActions handles common CRUD actions as well as search, sorting, counting, includes/excludes, and joins to optimize API development and make applying global changes easier.
3. While CRUDActions speeds up API development and creates highly optimized APIs, any changes to the module could affect all APIs, and additional testing and documentation is needed to implement it fully.
Infinum - Building API based apps without an API
Infinum - Building API based apps without an APIInfinum This document discusses building API-based apps and introduces Tweaks, a framework from Facebook that allows fine-tuning app parameters during development. It compares approaches for handling APIs, including waiting for the real API, creating fake responses, and using mock servers. The document also provides information on a demo project and contacts for learning more about APIs and the discussed tools and techniques.
AWS re:Invent "The secrets to building and delivering amazing apps at scale"
AWS re:Invent "The secrets to building and delivering amazing apps at scale"💻 Javier Garza The document outlines key strategies for building and delivering scalable applications, focusing on a three-layer architecture comprising frontend, backend, and network components. It emphasizes the importance of user experience, performance, network awareness, and security in app design while highlighting techniques for optimizing latency and leveraging edge computing. Additional considerations include distributed architecture, auto-scaling, and the necessity of continuous monitoring and devops automation to maintain functionality and performance.
Transformação Digital com API Management
Transformação Digital com API ManagementGustavo Zimmermann (MVP) The document discusses digital transformation through API management, highlighting on-premises and third-party APIs using Azure API Management. It notes significant growth in API consumption with metrics such as 4.5 billion calls per month and usage by 12 Fortune 100 companies. Additional resources for documentation and getting started with API management on Azure are provided.
Outpost24 webinar - Api security
Outpost24 webinar - Api securityOutpost24 API 101 discusses how to secure web applications and APIs. APIs are used extensively in web and mobile applications to allow communication between services but this can introduce security weaknesses if not implemented properly. API attacks are a growing threat, with 90% of breaches targeting web applications and APIs projected to become the most common attack vector by 2022. The document outlines security best practices for securing APIs throughout the development lifecycle from design to testing to runtime, and how one company implemented API security testing to improve their compliance and privacy posture.
API Strategy & Practice Conference - API Consumption from the Hackathon Trenches
API Strategy & Practice Conference - API Consumption from the Hackathon TrenchesAlex Gaber The document discusses hackathons and how they can help promote APIs and the development of mobile applications. It describes the speaker's experiences at various hackathons promoting different companies' APIs. It also discusses tools that can help organizations integrate their APIs into mobile applications, such as mobile backend as a service platforms and cross-platform mobile app frameworks. The overall message is that hackathons are an effective way to inspire API and mobile app development.
Apache Camel & The Art of Entreprise Integration
Apache Camel & The Art of Entreprise IntegrationAbdellatif BOUCHAMA The document discusses Apache Camel, an open-source integration framework that implements Enterprise Integration Patterns (EIP) and supports microservices with technologies like Spring Boot, Docker, and OpenShift/Kubernetes. It highlights its features such as routing, mediation, extensibility, and modular architecture, alongside practical examples of configuration in XML and Java DSL. The author, Abdellatif Bouchama, shares his experiences and insights on deploying microservices efficiently and integrating CI/CD workflows.
APIdays Paris 2019 - The Mother of All APIs - From Engelbart to the Present b...
APIdays Paris 2019 - The Mother of All APIs - From Engelbart to the Present b...apidays The document discusses the evolution of APIs, highlighting contributions from pioneers like Zdenek Nemec and Mike Amundsen. It introduces the concept of autonomous APIs and features the Superface communication protocol aimed at improving API usability and reducing vendor lock-in. The protocol addresses common challenges such as documentation maintenance and client resiliency, with a goal of making APIs easier to work with by 2020.
Learn react the right way
Learn react the right way Mohamed Thareef Bin Ubaid The document introduces React as a JavaScript library for building web and mobile applications, emphasizing its component-driven architecture. It explains key concepts such as composable, reusable, and testable components, along with the importance of stateful and stateless components in creating dynamic user interfaces. Additionally, it highlights the efficiency of React’s virtual DOM for handling data updates over time.
Reusable APIs
Reusable APIsCA API Management The document discusses the need for more reusable APIs and outlines 10 things API developers should stop doing, including mapping semantics to protocols instead of messages, hiding update and query rules in documentation, and requiring clients to recode and redeploy at random. It argues that APIs should map semantics to messages, use inline hypermedia controls, provide SDKs when needed, share message models rather than object models, describe services abstractly, put workflow in messages, avoid breaking changes, and distribute storage and execution rather than relying on single points of failure. The document concludes that making these changes to follow best practices for reusable APIs is not complicated, though some aspects may be hard.
API Lifecycle Management
API Lifecycle ManagementPostman API lifecycle management enables setting guidelines for how contributors, stakeholders, and consumers interact with an API throughout its different stages. It focuses on how teams collaborate across the planning, design, development, testing, deployment, and versioning/deprecation of an API. API lifecycle management ensures all parts of the process work together to build an API that meets its goals. The presenter demonstrated API lifecycle management using Postman.
Ng talk
Ng talkAymene Bennour The document provides an introduction to Angular, a JavaScript framework used for building interactive single-page applications (SPAs). It highlights the benefits of using a framework, such as maintaining clean code and scalability, and introduces the Angular CLI for efficient project setup and management. Additionally, it covers fundamental concepts like components, template binding, built-in directives, and pipes in Angular.
Android : Background Processing
Android : Background Processingshekhaman The document discusses background processing in Android development, emphasizing the importance of offloading heavy tasks from the UI thread to avoid slow apps and ANR errors. It outlines various methods such as Java threads, handlers, AsyncTask, service, and IntentService for managing background tasks and when to use each. Additionally, it provides links for further reading and resources to enhance understanding of Android background processing.
apidays LIVE Hong Kong 2021 - Better API DX with a CLI by Phil Nash, Twilio
apidays LIVE Hong Kong 2021 - Better API DX with a CLI by Phil Nash, Twilioapidays The document discusses enhancing API developer experience through a command line interface (CLI) built with Node.js and Oclif. It outlines key considerations for creating a useful CLI, such as minimum functionality, user contributions, and documentation. The author emphasizes the importance of better experience features, including autocomplete and plugin capabilities.
Air apps-and-smart-cards
Air apps-and-smart-cardsZaid Al-Dabbagh The document outlines a presentation by Zaid Al-Dabbagh and Jean-Baptiste Pin on air applications and smart cards, detailing their backgrounds and various projects like mysnapper. It highlights technical challenges, the advantages of using Adobe AIR for cross-platform support, and an architectural overview of the application's structure. The presentation includes discussions on integration, components, and live demos, emphasizing a user-friendly interface and performance improvements.
Building APIs with Node.js and MonogDB
Building APIs with Node.js and MonogDBCharlie Key This document provides an overview of APIs (Application Programming Interfaces) and their importance in software development, specifically using Node.js and MongoDB. It outlines steps for designing APIs, including planning, documentation, and implementation of CRUD methods through a sample project. Additionally, it discusses various methods for consuming APIs and highlights tools for testing and authentication.
apidays LIVE New York 2021 - Designing API's: Less Data is More! by Damir Svr...
apidays LIVE New York 2021 - Designing API's: Less Data is More! by Damir Svr...apidays The document discusses best practices for API design, emphasizing the principle of creating a minimal API surface to avoid redundancy and unnecessary overhead. It outlines two main principles: designing from strict to loose and avoiding extra flexibility to enhance developer experience and prevent future complications. The author argues that it is easier to add features in the future than to remove them and encourages thoughtful, schema-first design approaches based on client needs.
Welcome Note by Abhinav Asthana, CEO at Postman
Welcome Note by Abhinav Asthana, CEO at PostmanPostman This document summarizes the keynote speech by Abhinav Asthana, CEO of Postman. It discusses how Postman started as an HTTP client but has evolved into a platform for API development. Postman now has over 5 million users and helps teams design, test, document, and monitor their APIs. It allows collaboration through workspaces and integrates with other tools. Postman's vision is to make API development central to modern software engineering.
Building REST APIs that don't suck for modern day SPAs
Building REST APIs that don't suck for modern day SPAsAbati Adewale The document discusses best practices for building REST APIs that integrate with single page applications (SPAs). It emphasizes the importance of accessibility, documentation, error handling, and understanding UI designs when developing private APIs. The content is aimed at ensuring developers create efficient, user-friendly, and consistent API structures.
Bpstudy ajnreview
Bpstudy ajnreviewKazunori Sato - The document discusses "appengine ja night", a monthly community event in Japan for App Engine developers that has been running since October 2009.
- It provides details on the topics and speakers covered at each event, with sessions on things like best practices for production apps, DSL development, transactions, testing, and more.
- The events are held in Tokyo, Kyoto, and Sapporo and typically attract 100-200 attendees each month to learn about techniques for building applications on Google App Engine.
Our Technical Proficiencies
Our Technical ProficienciesVirti Infotech Pvt. Ltd. Virti Infotech Pvt. Ltd. is an IT services company providing high-quality software, mobile, and web solutions. The company's leadership includes Virendra Jain, CEO & CTO, and it specializes in mobile app development, front-end and back-end development using various technologies, including Microsoft stack and cloud services. They invite inquiries for future projects via [email protected].
Php development
Php developmentmariaopenwave Offshore PHP developers provide a lower-cost alternative to local PHP developers in California. By outsourcing web development projects to offshore companies, businesses can reduce costs while still receiving high quality work. Offshore developers offer competitive rates and expertise in technologies like PHP, XML, and MySQL. Their services allow companies to maximize productivity and minimize both initial website development expenses and ongoing maintenance costs.
Micro frontends
Micro frontendsAssaf Gannon The document discusses the concept of micro frontends as an alternative to monolithic web applications, highlighting the advantages and disadvantages of each approach. It explains how micro frontends allow individual features to be developed and deployed independently, supported by various implementation techniques like iframes and component-based architecture. Additionally, it emphasizes the use of web components to create reusable, encapsulated HTML elements that enhance modularity within applications.
MicroFrontend With Iframes, dirty laundry that can be cleaned
MicroFrontend With Iframes, dirty laundry that can be cleanedRan Wahle The document discusses the concept of micro frontends, focusing on the architecture where a single application consists of multiple modules developed by different teams, potentially utilizing various tech stacks. It highlights the use of iframes for remote imports, outlining how they enable communication and navigation between different parts of the application while addressing challenges related to isolation and browser limitations. Additionally, it provides a code demonstration and references a GitHub repository for further exploration.
Building Micro-Frontends: Scaling Teams and Projects Empowering Developers 1s...
Building Micro-Frontends: Scaling Teams and Projects Empowering Developers 1s...pyrageisari Building Micro-Frontends: Scaling Teams and Projects Empowering Developers 1st Edition Luca Mezzalira
Building Micro-Frontends: Scaling Teams and Projects Empowering Developers 1st Edition Luca Mezzalira
Building Micro-Frontends: Scaling Teams and Projects Empowering Developers 1st Edition Luca Mezzalira
JSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontendVlad Fedosov The document discusses technology agnostic microservices, specifically focusing on micro frontends, which allow independent development and deployment of UI features by cross-functional teams. It outlines possible approaches for implementing micro frontends, including architectural considerations and challenges encountered in production, such as code isolation and dynamic code loading. The speaker, Vladlen Fedosov, shares insights from his experience at Namecheap and emphasizes the importance of documentation and monitoring in maintaining such a system.
"Micro-frontends from A to Z. How and Why we use Micro-frontends in Namecheap...
"Micro-frontends from A to Z. How and Why we use Micro-frontends in Namecheap...Fwdays The document discusses the transition from monolithic to microservice architecture, particularly focusing on frontend microservices and their benefits such as independent deployments and improved development experiences. It outlines the structure, goals, and operational details of implementing frontend microservices, including the integration of server-side rendering (SSR) and error handling strategies. Additionally, it addresses challenges like maintaining UI consistency and organizational communication, while emphasizing the importance of a robust development process and localized configuration.
More Related Content
What's hot (17)
API Strategy & Practice Conference - API Consumption from the Hackathon Trenches
API Strategy & Practice Conference - API Consumption from the Hackathon TrenchesAlex Gaber The document discusses hackathons and how they can help promote APIs and the development of mobile applications. It describes the speaker's experiences at various hackathons promoting different companies' APIs. It also discusses tools that can help organizations integrate their APIs into mobile applications, such as mobile backend as a service platforms and cross-platform mobile app frameworks. The overall message is that hackathons are an effective way to inspire API and mobile app development.
Apache Camel & The Art of Entreprise Integration
Apache Camel & The Art of Entreprise IntegrationAbdellatif BOUCHAMA The document discusses Apache Camel, an open-source integration framework that implements Enterprise Integration Patterns (EIP) and supports microservices with technologies like Spring Boot, Docker, and OpenShift/Kubernetes. It highlights its features such as routing, mediation, extensibility, and modular architecture, alongside practical examples of configuration in XML and Java DSL. The author, Abdellatif Bouchama, shares his experiences and insights on deploying microservices efficiently and integrating CI/CD workflows.
APIdays Paris 2019 - The Mother of All APIs - From Engelbart to the Present b...
APIdays Paris 2019 - The Mother of All APIs - From Engelbart to the Present b...apidays The document discusses the evolution of APIs, highlighting contributions from pioneers like Zdenek Nemec and Mike Amundsen. It introduces the concept of autonomous APIs and features the Superface communication protocol aimed at improving API usability and reducing vendor lock-in. The protocol addresses common challenges such as documentation maintenance and client resiliency, with a goal of making APIs easier to work with by 2020.
Learn react the right way
Learn react the right way Mohamed Thareef Bin Ubaid The document introduces React as a JavaScript library for building web and mobile applications, emphasizing its component-driven architecture. It explains key concepts such as composable, reusable, and testable components, along with the importance of stateful and stateless components in creating dynamic user interfaces. Additionally, it highlights the efficiency of React’s virtual DOM for handling data updates over time.
Reusable APIs
Reusable APIsCA API Management The document discusses the need for more reusable APIs and outlines 10 things API developers should stop doing, including mapping semantics to protocols instead of messages, hiding update and query rules in documentation, and requiring clients to recode and redeploy at random. It argues that APIs should map semantics to messages, use inline hypermedia controls, provide SDKs when needed, share message models rather than object models, describe services abstractly, put workflow in messages, avoid breaking changes, and distribute storage and execution rather than relying on single points of failure. The document concludes that making these changes to follow best practices for reusable APIs is not complicated, though some aspects may be hard.
API Lifecycle Management
API Lifecycle ManagementPostman API lifecycle management enables setting guidelines for how contributors, stakeholders, and consumers interact with an API throughout its different stages. It focuses on how teams collaborate across the planning, design, development, testing, deployment, and versioning/deprecation of an API. API lifecycle management ensures all parts of the process work together to build an API that meets its goals. The presenter demonstrated API lifecycle management using Postman.
Ng talk
Ng talkAymene Bennour The document provides an introduction to Angular, a JavaScript framework used for building interactive single-page applications (SPAs). It highlights the benefits of using a framework, such as maintaining clean code and scalability, and introduces the Angular CLI for efficient project setup and management. Additionally, it covers fundamental concepts like components, template binding, built-in directives, and pipes in Angular.
Android : Background Processing
Android : Background Processingshekhaman The document discusses background processing in Android development, emphasizing the importance of offloading heavy tasks from the UI thread to avoid slow apps and ANR errors. It outlines various methods such as Java threads, handlers, AsyncTask, service, and IntentService for managing background tasks and when to use each. Additionally, it provides links for further reading and resources to enhance understanding of Android background processing.
apidays LIVE Hong Kong 2021 - Better API DX with a CLI by Phil Nash, Twilio
apidays LIVE Hong Kong 2021 - Better API DX with a CLI by Phil Nash, Twilioapidays The document discusses enhancing API developer experience through a command line interface (CLI) built with Node.js and Oclif. It outlines key considerations for creating a useful CLI, such as minimum functionality, user contributions, and documentation. The author emphasizes the importance of better experience features, including autocomplete and plugin capabilities.
Air apps-and-smart-cards
Air apps-and-smart-cardsZaid Al-Dabbagh The document outlines a presentation by Zaid Al-Dabbagh and Jean-Baptiste Pin on air applications and smart cards, detailing their backgrounds and various projects like mysnapper. It highlights technical challenges, the advantages of using Adobe AIR for cross-platform support, and an architectural overview of the application's structure. The presentation includes discussions on integration, components, and live demos, emphasizing a user-friendly interface and performance improvements.
Building APIs with Node.js and MonogDB
Building APIs with Node.js and MonogDBCharlie Key This document provides an overview of APIs (Application Programming Interfaces) and their importance in software development, specifically using Node.js and MongoDB. It outlines steps for designing APIs, including planning, documentation, and implementation of CRUD methods through a sample project. Additionally, it discusses various methods for consuming APIs and highlights tools for testing and authentication.
apidays LIVE New York 2021 - Designing API's: Less Data is More! by Damir Svr...
apidays LIVE New York 2021 - Designing API's: Less Data is More! by Damir Svr...apidays The document discusses best practices for API design, emphasizing the principle of creating a minimal API surface to avoid redundancy and unnecessary overhead. It outlines two main principles: designing from strict to loose and avoiding extra flexibility to enhance developer experience and prevent future complications. The author argues that it is easier to add features in the future than to remove them and encourages thoughtful, schema-first design approaches based on client needs.
Welcome Note by Abhinav Asthana, CEO at Postman
Welcome Note by Abhinav Asthana, CEO at PostmanPostman This document summarizes the keynote speech by Abhinav Asthana, CEO of Postman. It discusses how Postman started as an HTTP client but has evolved into a platform for API development. Postman now has over 5 million users and helps teams design, test, document, and monitor their APIs. It allows collaboration through workspaces and integrates with other tools. Postman's vision is to make API development central to modern software engineering.
Building REST APIs that don't suck for modern day SPAs
Building REST APIs that don't suck for modern day SPAsAbati Adewale The document discusses best practices for building REST APIs that integrate with single page applications (SPAs). It emphasizes the importance of accessibility, documentation, error handling, and understanding UI designs when developing private APIs. The content is aimed at ensuring developers create efficient, user-friendly, and consistent API structures.
Bpstudy ajnreview
Bpstudy ajnreviewKazunori Sato - The document discusses "appengine ja night", a monthly community event in Japan for App Engine developers that has been running since October 2009.
- It provides details on the topics and speakers covered at each event, with sessions on things like best practices for production apps, DSL development, transactions, testing, and more.
- The events are held in Tokyo, Kyoto, and Sapporo and typically attract 100-200 attendees each month to learn about techniques for building applications on Google App Engine.
Our Technical Proficiencies
Our Technical ProficienciesVirti Infotech Pvt. Ltd. Virti Infotech Pvt. Ltd. is an IT services company providing high-quality software, mobile, and web solutions. The company's leadership includes Virendra Jain, CEO & CTO, and it specializes in mobile app development, front-end and back-end development using various technologies, including Microsoft stack and cloud services. They invite inquiries for future projects via [email protected].
Php development
Php developmentmariaopenwave Offshore PHP developers provide a lower-cost alternative to local PHP developers in California. By outsourcing web development projects to offshore companies, businesses can reduce costs while still receiving high quality work. Offshore developers offer competitive rates and expertise in technologies like PHP, XML, and MySQL. Their services allow companies to maximize productivity and minimize both initial website development expenses and ongoing maintenance costs.
Similar to Using legacy code with micro frontends (20)
Micro frontends
Micro frontendsAssaf Gannon The document discusses the concept of micro frontends as an alternative to monolithic web applications, highlighting the advantages and disadvantages of each approach. It explains how micro frontends allow individual features to be developed and deployed independently, supported by various implementation techniques like iframes and component-based architecture. Additionally, it emphasizes the use of web components to create reusable, encapsulated HTML elements that enhance modularity within applications.
MicroFrontend With Iframes, dirty laundry that can be cleaned
MicroFrontend With Iframes, dirty laundry that can be cleanedRan Wahle The document discusses the concept of micro frontends, focusing on the architecture where a single application consists of multiple modules developed by different teams, potentially utilizing various tech stacks. It highlights the use of iframes for remote imports, outlining how they enable communication and navigation between different parts of the application while addressing challenges related to isolation and browser limitations. Additionally, it provides a code demonstration and references a GitHub repository for further exploration.
Building Micro-Frontends: Scaling Teams and Projects Empowering Developers 1s...
Building Micro-Frontends: Scaling Teams and Projects Empowering Developers 1s...pyrageisari Building Micro-Frontends: Scaling Teams and Projects Empowering Developers 1st Edition Luca Mezzalira
Building Micro-Frontends: Scaling Teams and Projects Empowering Developers 1st Edition Luca Mezzalira
Building Micro-Frontends: Scaling Teams and Projects Empowering Developers 1st Edition Luca Mezzalira
JSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontendVlad Fedosov The document discusses technology agnostic microservices, specifically focusing on micro frontends, which allow independent development and deployment of UI features by cross-functional teams. It outlines possible approaches for implementing micro frontends, including architectural considerations and challenges encountered in production, such as code isolation and dynamic code loading. The speaker, Vladlen Fedosov, shares insights from his experience at Namecheap and emphasizes the importance of documentation and monitoring in maintaining such a system.
"Micro-frontends from A to Z. How and Why we use Micro-frontends in Namecheap...
"Micro-frontends from A to Z. How and Why we use Micro-frontends in Namecheap...Fwdays The document discusses the transition from monolithic to microservice architecture, particularly focusing on frontend microservices and their benefits such as independent deployments and improved development experiences. It outlines the structure, goals, and operational details of implementing frontend microservices, including the integration of server-side rendering (SSR) and error handling strategies. Additionally, it addresses challenges like maintaining UI consistency and organizational communication, while emphasizing the importance of a robust development process and localized configuration.
Bd conf sencha touch workshop
Bd conf sencha touch workshopJames Pearce The document provides an overview of building mobile web apps with HTML, CSS, and JavaScript. It discusses using declarative HTML, programmatic JavaScript, and thin clients as alternatives to thick clients. It also summarizes support for HTML5 features across different mobile browsers and frameworks like Sencha Touch that can be used to develop rich mobile apps with web standards.
Building Micro-Frontends: Scaling Teams and Projects Empowering Developers 1s...
Building Micro-Frontends: Scaling Teams and Projects Empowering Developers 1s...azmeelbronii Building Micro-Frontends: Scaling Teams and Projects Empowering Developers 1st Edition Luca Mezzalira
Building Micro-Frontends: Scaling Teams and Projects Empowering Developers 1st Edition Luca Mezzalira
Building Micro-Frontends: Scaling Teams and Projects Empowering Developers 1st Edition Luca Mezzalira
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...JSFestUA The document presents an overview of technology-agnostic microservices and micro frontends, emphasizing their role in creating maintainable and independently deployable web applications. It discusses challenges such as page composition, routing, and dynamic code loading, along with possible solutions and core technologies used, like Zalando's Tailor and Single-spa. Additionally, it highlights the importance of code isolation and error reporting strategies to ensure smooth operation within a micro frontend architecture.
An Introduction to Sencha Touch
An Introduction to Sencha TouchJames Pearce This document introduces Sencha Touch, a JavaScript framework for building rich mobile apps with web standards. It discusses how Sencha Touch allows developers to write code once and deploy apps across multiple mobile platforms, leveraging familiar skills and technologies like HTML, CSS, and JavaScript. The document outlines key Sencha Touch features like layouts, components, touch events, data handling, theming and more. It provides examples of common UI components like lists, carousels, sheets and shows how they are implemented. Finally, it discusses architectural considerations for mobile apps and potential opportunities around location services, analytics and monetization.
Grails for hipsters
Grails for hipstersRobert Fletcher This document discusses how to build hipster-friendly web applications using Grails and front-end tools. It introduces Vert.x for offloading expensive work, Handlebars for templating, and implementing single page applications with mirrored routing and dual rendering. Front-end build tools like Grunt, Brunch, and CodeKit are also covered. Templates can be reused across views, and Handlebars integrates with Grails through a plugin.
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJSKNOWARTH - Software Development Company This document discusses micro frontends, which divide large web applications into independent, standalone units. It outlines the issues with traditional monolithic applications, such as increased complexity and difficulty scaling. Micro frontends address these issues by allowing independent teams to work on separate application pieces with different technologies. The document covers micro frontend design considerations, communication patterns between units, and technical implementations using Angular Elements and the Frint framework.
Create a mobile web app with Sencha Touch
Create a mobile web app with Sencha TouchJames Pearce Sencha Touch is a JavaScript framework for building rich mobile web apps using HTML5 standards. It provides various UI components like lists, forms, charts and tools for building common app patterns. The framework allows developers to structure their app, lay out the user interface with panels, toolbars and lists, model and load data to populate the UI, and customize the visual theme. Sencha Touch apps can be built to work across multiple mobile devices using only web technologies.
How to migrate large project from Angular to React
How to migrate large project from Angular to ReactTomasz Bak The document discusses strategies for migrating from Angular to React, emphasizing the importance of evaluating business value before undertaking such a project. It outlines various migration strategies, such as the strangler application pattern and micro frontends architecture, which allows for incremental updates and team autonomy. Additionally, it highlights the advantages of React, including a robust library ecosystem and functional components, advocating for a modular approach to application development.
A mobile web app for Android in 75 minutes
A mobile web app for Android in 75 minutesJames Pearce This document provides an overview of building a mobile web app for Android using Sencha Touch in 75 minutes. It demonstrates how to structure the app, add basic UI elements like panels and lists, load and display data, and customize the theme. The document shows the common patterns used in Sencha Touch like adding lists to panels and nesting UI elements. It also provides an example of a more complex app called The Valley App that utilizes Sencha Touch to display Yelp business data on a map with lists and details.
Bridging the Gap: Single-Page Apps and AEM
Bridging the Gap: Single-Page Apps and AEMrbl002 The document presents an overview of implementing single-page applications (SPAs) using AngularJS within Adobe Experience Manager (AEM). It discusses the benefits and challenges of SPAs, the integration of Angular components, and the role of PhoneGap for creating mobile applications. The goal is to enable authorable content and enhance app store presence while addressing various technical considerations.
Component based User Interface Rendering with State Caching Between Routes
Component based User Interface Rendering with State Caching Between RoutesIRJET Journal This document discusses component-based user interface rendering with state caching between routes in client-side routing applications. It begins by explaining the differences between server-side and client-side routing, with client-side routing allowing for preservation of application state through caching. The document then discusses building the UI out of reusable components, using a virtual DOM for efficient re-rendering, and breaking rendering work into fibers to avoid blocking the main thread. The goal is to provide a native-like user experience when navigating between views by caching and reusing application state.
DIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayBojan Veljanovski This document provides an overview of front-end development approaches, including traditional server-side rendering and modern single-page applications (SPAs). It discusses the evolution from traditional to SPA approaches, characteristics of SPAs like modularity and client-side rendering, and considerations for choosing between server-side and client-side solutions. The document also showcases GitHub.com and the Azure Portal as examples of applications that take hybrid approaches, with some modules behaving as traditional sites and others as fully-fledged SPAs.
Refactoring to a Single Page Application
Refactoring to a Single Page ApplicationCodemotion The document outlines a presentation by Marcello Teodori on refactoring traditional web applications into single-page applications (SPAs). It emphasizes the benefits of using microservices for the backend, the restructuring of code without impacting functionality, and various strategies for enhancing user experience. Key takeaways include the importance of a solid test suite, effective team collaboration, and ongoing iterations to improve application performance.
Refactoring to a SPA
Refactoring to a SPAMarcello Teodori The document discusses refactoring traditional multi-page web applications into single-page applications (SPAs) to enhance user experience and improve software performance. It outlines a series of strategies for the transition, including migrating backend services to microservices and emphasizing frontend development with JavaScript. The author shares lessons learned from past experiences, highlighting both successes and challenges in the process.
Progressive Web Apps. What, why and how
Progressive Web Apps. What, why and howRiza Fahmi Progressive Web Apps are a new approach to application development that combines the best of the web and the best of native apps. They are reliable, fast and engaging like native apps while also being responsive and capable of being installed like regular web pages. The key technologies that enable Progressive Web Apps are service workers, app manifests, and responsive design. Service workers allow for caching assets and serving cached responses even when offline. App manifests provide metadata that makes the app feel like a native application to the user. Responsive design ensures the app works across different screen sizes.
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJSKNOWARTH - Software Development Company
Ad
More from Ran Wahle (20)
Implementing promises with typescripts, step by step
Implementing promises with typescripts, step by stepRan Wahle Implementing promises with typescripts, step by step.
This slides were presented at Negev Web Development meetup
HTML dialog element demonstration session
HTML dialog element demonstration sessionRan Wahle The document discusses creating a dialog interface using HTML, CSS, and JavaScript. It details the implementation steps, including event listeners for opening and closing the dialog, as well as utilizing the dialog element's properties and methods. Additionally, it includes a code repository link for further reference.
Into React-DOM.pptx
Into React-DOM.pptxRan Wahle The document provides an overview of React component development, discussing the importance of a declarative approach, scalability, and the overhead associated with traditional methods. It details the rendering lifecycle, including processes like begin work, diffing algorithms, and how to manage state and events within components. The author emphasizes mapping props and events effectively to streamline component performance and updates.
Lets go to the background
Lets go to the backgroundRan Wahle This document discusses background operations in web applications including background sync, periodic background sync, and background fetch. Background sync allows sending data whenever the network is available, periodic background sync gives the feeling of constant connection to the server even when offline, and background fetch allows downloading content from the network without stopping when the network throttles or stops. These background operations help make the user experience less dependent on the network status.
Permissions api
Permissions apiRan Wahle The document discusses the new Permission API which provides a unified way for websites to query, request, and revoke user permissions and handle changes. It allows developers to know the permission status without asking, and be notified of changes. Some permissions like camera and accelerometer may not work the same way yet as it is still an experimental API. Links are provided for the specification, MDN documentation, a polyfill, and demo code.
Lets go vanilla
Lets go vanillaRan Wahle The presentation discusses the evolution of browsers, JavaScript, and frameworks. It argues that while frameworks provide useful features like data binding and routing, they can also lock developers into certain approaches. Reinventing the wheel with vanilla JavaScript is possible using browser APIs and standards like custom elements, attributes, events, and the History API. Programming directly with vanilla JavaScript ensures familiarity with underlying capabilities and flexibility to choose the best tools.
Custom elements
Custom elements Ran Wahle The document discusses custom elements as part of web components standards, focusing on their lifecycle, attributes, and events, along with frameworks like Stencil.js and Angular Elements for building reusable components. It highlights the ease of writing custom elements in vanilla JavaScript, though it can also be challenging, and provides links to resources and a demo code repository. Additionally, the author, Ran Wahle, is a front-end developer at Tikal and shares insights on custom elements and integration with various libraries.
Web workers
Web workers Ran Wahle Web workers allow JavaScript to run in background threads to optimize performance. A worker runs in a separate global context and can communicate with the main thread via messaging. A shared worker can serve multiple browsing contexts and uses ports to send and receive messages between contexts. Workers parallelize work to speed up tasks while shared workers facilitate sharing state across contexts by using a single worker instance.
Ngrx one-effect
Ngrx one-effectRan Wahle The document discusses a fullstack developer's approach to using one effect to manage data fetching in Angular applications with NgRx. It outlines a pattern for creating actions and effects to streamline API calls, emphasizing the use of a single effect to handle multiple data fetch attempts to reduce code complexity. The author shares resources and code examples to illustrate the implementation of this pattern.
Angular migration
Angular migrationRan Wahle The document discusses the challenges and considerations of migrating a large project to an Angular fullstack environment as a service, emphasizing that this process is essentially a rewrite rather than a straightforward migration. While there are long-term benefits such as improved performance and user experience, short-term impacts may include increased bugs and poor delivery. It outlines the need for careful planning, refactoring, and maintaining a balance between old and new code during the transition.
Javascript async / await Frontend-IL
Javascript async / await Frontend-ILRan Wahle The document discusses async/await in JavaScript. It explains that async/await allows writing asynchronous code that looks synchronous by using the await keyword to "turn" a promise into its resolved value. Async functions always return promises, even though code below await reads synchronously. Async/await simplifies code by avoiding callback nesting and is supported in modern browsers.
Boost js state management
Boost js state managementRan Wahle The document discusses state management in web applications using Redux and MobX. It presents a call center management app to demonstrate both approaches. Redux uses actions, reducers, and middleware for state management with a defined data flow. MobX uses decorators to automatically manage state with less code but less testability. Best practices include connecting only smart components to the store and using the store for reusable data. While Redux is more complex and testable, MobX is more automatic but "magical".
Angular 2.0 change detection
Angular 2.0 change detectionRan Wahle The document discusses Angular 2.0 change detection. It describes how Angular 2.0 change detection is more efficient and predictable compared to Angular 1.x by using a component-based approach rather than a graph. Each component has its own change detector that is generated at compile time. Change detection occurs top-down via the change detection tree. The document also discusses strategies like OnPush, immutable objects, observables, and manually controlling change detection.
Code migration from Angular 1.x to Angular 2.0
Code migration from Angular 1.x to Angular 2.0Ran Wahle The document discusses the migration process from Angular 1.x to Angular 2.0, highlighting the need to gradually update applications while enjoying the capabilities of Angular 2.0. It outlines steps such as restructuring modules, switching to TypeScript, and using Angular 1.5 components for a smoother transition. The author emphasizes that code from Angular 1.x can be adapted to resemble Angular 2.0, facilitating a dual-operation environment during the migration.
Async patterns in javascript
Async patterns in javascriptRan Wahle The document discusses various asynchronous patterns in JavaScript, including using events, callbacks with Socket.IO, promises, observables, iterators, generators, and async/await. It provides code examples for promise creation, using the Fetch API, ES2015 iterators, and TypeScript's async/await syntax. The presentation aims to demonstrate asynchronous patterns for event handling, promises, iterators/generators, and async/await in TypeScript and Angular 2.
Angular js 2
Angular js 2Ran Wahle AngularJs 2.0 introduces components as the fundamental building blocks, replacing directives. The presentation covers getting started with AngularJs 2.0, including dependencies, configuration, components, data binding, services, routing and migration from Angular 1. It emphasizes that Angular 2 is a rewrite built on newer standards to improve performance and reduce opinionation. Migration involves componentizing the application and using an upgrade adapter to support a hybrid Angular 1 and 2 app.
Asyncawait in typescript
Asyncawait in typescriptRan Wahle The document summarizes a presentation about using async/await to write asynchronous JavaScript code in a synchronous style. It begins with an introduction to promises as the standard pattern for asynchronous programming. It then demonstrates how async/await allows writing asynchronous code that looks synchronous using async functions and the await keyword. Under the hood, async/await uses generators produced by the TypeScript compiler. The presentation includes code examples and demos of geolocation and reverse geocoding using promises and async/await. It concludes with additional resources for learning more about iterators, generators, and async/await.
Angular%201%20to%20angular%202
Angular%201%20to%20angular%202Ran Wahle Angular 2.0 introduces significant changes from Angular 1.x including a new component-based architecture, use of TypeScript for static typing, and improved performance. The document discusses how to prepare Angular 1.x applications for migration by refactoring into components and using TypeScript. It also provides an overview of key differences in Angular 2.0 like bootstrapping, data binding, dependency injection and services.
What’s new in angular 2 - From FrontEnd IL Meetup
What’s new in angular 2 - From FrontEnd IL MeetupRan Wahle This document provides an overview of the key differences between Angular 1.x and Angular 2.0. Angular 2.0 introduces components, new data binding, and dependency injection based on newer standards like ES6. Components are classes with templates and metadata, replacing directives. Data binding uses property and event binding instead of two-way binding. Change detection is enhanced for performance. Angular 2.0 apps are bootstrapped differently by creating and bootstrapping components instead of modules.
angularJs Workshop
angularJs WorkshopRan Wahle AngularJS is an open-source JavaScript framework for building dynamic web applications. It uses HTML as the template language and allows extending HTML vocabulary for the application. The key concepts covered in the document include modules and dependency injection, data binding using controllers and scopes, services, filters, form validation, directives, and routing. Various AngularJS features like modules, controllers, services, directives etc. are demonstrated via code examples. The document provides an introduction to core AngularJS concepts through explanations, code samples and a demo.
Ad
Recently uploaded (20)
Making significant Software Architecture decisions
Making significant Software Architecture decisionsBert Jan Schrijver Presented at the iSAQB Software Architecture Community NL meetup on 12-6-2025
What is data visualization and how data visualization tool can help.pptx
What is data visualization and how data visualization tool can help.pptxVarsha Nayak An open source data visualization tool enhances this process by providing flexible, cost-effective solutions that allow users to customize and scale their visualizations according to their needs. These tools enable organizations to make data-driven decisions with complete freedom from proprietary software limitations. Whether you're a data scientist, marketer, or business leader, understanding how to utilize an open source data visualization tool can significantly improve your ability to communicate insights effectively.
Looking for a BIRT Report Alternative Here’s Why Helical Insight Stands Out.pdf
Looking for a BIRT Report Alternative Here’s Why Helical Insight Stands Out.pdfVarsha Nayak The search for an Alternative to BIRT Reports has intensified as companies face challenges with BIRT's steep learning curve, limited visualization capabilities, and complex deployment requirements. Organizations need reporting solutions that offer intuitive design interfaces, comprehensive analytics features, and seamless integration capabilities – all while maintaining the reliability and performance that enterprise environments demand.
Emvigo Capability Deck 2025: Accelerating Innovation Through Intelligent Soft...
Emvigo Capability Deck 2025: Accelerating Innovation Through Intelligent Soft...Emvigo Technologies Welcome to Emvigo’s Capability Deck for 2025 – a comprehensive overview of how we help businesses launch, scale, and sustain digital success through cutting-edge technology solutions.
With 13+ years of experience and a presence across the UK, UAE, and India, Emvigo is an ISO-certified software company trusted by leading global organizations including the NHS, Verra, London Business School, and George Washington University.
🔧 What We Do
We specialize in:
Rapid MVP development (go from idea to launch in just 4 weeks)
Custom software development
Gen AI applications and AI-as-a-Service (AIaaS)
Enterprise cloud architecture
DevOps, CI/CD, and infrastructure automation
QA and test automation
E-commerce platforms and performance optimization
Digital marketing and analytics integrations
🧠 AI at the Core
Our delivery model is infused with AI – from workflow optimization to proactive risk management. We leverage GenAI, NLP, and ML to make your software smarter, faster, and more secure.
📈 Impact in Numbers
500+ successful projects delivered
200+ web and mobile apps launched
42-month average client engagement
30+ active projects at any time
🌍 Industries We Serve
Fintech
Healthcare
Education (E-Learning)
Sustainability & Compliance
Real Estate
Energy
Customer Experience platforms
⚙️ Flexible Engagement Models
Whether you're looking for dedicated teams, fixed-cost projects, or time-and-materials models, we deliver with agility and transparency.
📢 Why Clients Choose Emvigo
✅ AI-accelerated delivery
✅ Strong focus on long-term partnerships
✅ Highly rated on Clutch and Google Reviews
✅ Proactive and adaptable to change
✅ Fully GDPR-compliant and security-conscious
🔗 Visit: emvigotech.com
📬 Contact: [email protected]
📞 Ready to scale your tech with confidence? Let’s build the future, together.
OpenTelemetry 101 Cloud Native Barcelona
OpenTelemetry 101 Cloud Native BarcelonaImma Valls Bernaus A brief introduction to OpenTelemetry, with a practical example of auto-instrumenting a Java web application with the Grafana stack (Loki, Grafana, Tempo, and Mimir).
Advanced Token Development - Decentralized Innovation
Advanced Token Development - Decentralized Innovationarohisinghas720 The world of blockchain is evolving at a fast pace, and at the heart of this transformation lies advanced token development. No longer limited to simple digital assets, today’s tokens are programmable, dynamic, and play a crucial role in driving decentralized applications across finance, governance, gaming, and beyond.
Who will create the languages of the future?
Who will create the languages of the future?Jordi Cabot Will future languages be created by language engineers?
Can you "vibe" a DSL?
In this talk, we will explore the changing landscape of language engineering and discuss how Artificial Intelligence and low-code/no-code techniques can play a role in this future by helping in the definition, use, execution, and testing of new languages. Even empowering non-tech users to create their own language infrastructure. Maybe without them even realizing.
How Insurance Policy Management Software Streamlines Operations
How Insurance Policy Management Software Streamlines OperationsInsurance Tech Services Insurance policy management software transforms complex, manual insurance operations into streamlined, efficient digital workflows, enhancing productivity, accuracy, customer service, and profitability for insurers. Visit https://www.damcogroup.com/insurance/policy-management-software for more details!
Transmission Media. (Computer Networks)
Transmission Media. (Computer Networks)S Pranav (Deepu) INTRODUCTION:TRANSMISSION MEDIA
• A transmission media in data communication is a physical path between the sender and
the receiver and it is the channel through which data can be sent from one location to
another. Data can be represented through signals by computers and other sorts of
telecommunication devices. These are transmitted from one device to another in the
form of electromagnetic signals. These Electromagnetic signals can move from one
sender to another receiver through a vacuum, air, or other transmission media.
Electromagnetic energy mainly includes radio waves, visible light, UV light, and gamma
ra
What is data visualization and how data visualization tool can help.pdf
What is data visualization and how data visualization tool can help.pdfVarsha Nayak An open source data visualization tool enhances this process by providing flexible, cost-effective solutions that allow users to customize and scale their visualizations according to their needs. These tools enable organizations to make data-driven decisions with complete freedom from proprietary software limitations. Whether you're a data scientist, marketer, or business leader, understanding how to utilize an open source data visualization tool can significantly improve your ability to communicate insights effectively.
Artificial Intelligence Workloads and Data Center Management
Artificial Intelligence Workloads and Data Center ManagementSandeepKS52 Data centers play a crucial role in the modern digital landscape, serving as the backbone for data storage, processing, and management. Understanding the structure and function of these facilities is essential, as they house the technology that supports various applications and services. The use of Kubernetes and container orchestration has transformed how software is deployed and managed, allowing for greater efficiency and scalability in handling applications. Additionally, the management of AI workloads presents unique challenges and opportunities, as organizations seek to optimize resources and performance for complex algorithms and data processing tasks. Together, these topics provide a comprehensive overview of the technologies and strategies that drive today’s information systems.
Code and No-Code Journeys: The Coverage Overlook
Code and No-Code Journeys: The Coverage OverlookApplitools Explore practical ways to expand visual and functional UI coverage without deep coding or heavy maintenance in this session. Session recording and more info at applitools.com
GDG Douglas - Google AI Agents: Your Next Intern?
GDG Douglas - Google AI Agents: Your Next Intern?felipeceotto Presentation done at the GDG Douglas event for June 2025.
A first look at Google's new Agent Development Kit.
Agent Development Kit is a new open-source framework from Google designed to simplify the full stack end-to-end development of agents and multi-agent systems.
Meet You in the Middle: 1000x Performance for Parquet Queries on PB-Scale Dat...
Meet You in the Middle: 1000x Performance for Parquet Queries on PB-Scale Dat...Alluxio, Inc. Alluxio Webinar
June 10, 2025
For more Alluxio Events: https://www.alluxio.io/events/
Speaker:
David Zhu (Engineering Manager @ Alluxio)
Storing data as Parquet files on cloud object storage, such as AWS S3, has become prevalent not only for large-scale data lakes but also as lightweight feature stores for training and inference, or as document stores for Retrieval-Augmented Generation (RAG). However, querying petabyte-to-exabyte-scale data lakes directly from S3 remains notoriously slow, with latencies typically ranging from hundreds of milliseconds to several seconds.
In this webinar, David Zhu, Software Engineering Manager at Alluxio, will present the results of a joint collaboration between Alluxio and a leading SaaS and data infrastructure enterprise that explored leveraging Alluxio as a high-performance caching and acceleration layer atop AWS S3 for ultra-fast querying of Parquet files at PB scale.
David will share:
- How Alluxio delivers sub-millisecond Time-to-First-Byte (TTFB) for Parquet queries, comparable to S3 Express One Zone, without requiring specialized hardware, data format changes, or data migration from your existing data lake.
- The architecture that enables Alluxio’s throughput to scale linearly with cluster size, achieving one million queries per second on a modest 50-node deployment, surpassing S3 Express single-account throughput by 50x without latency degradation.
- Specifics on how Alluxio offloads partial Parquet read operations and reduces overhead, enabling direct, ultra-low-latency point queries in hundreds of microseconds and achieving a 1,000x performance gain over traditional S3 querying methods.
Open Source Software Development Methods
Open Source Software Development MethodsVICTOR MAESTRE RAMIREZ Open Source Software Development Methods
Download Adobe Illustrator Crack free for Windows 2025?
Download Adobe Illustrator Crack free for Windows 2025?grete1122g COPY & PASTE LINK 👉👉👉 https://click4pc.com/after-verification-click-go-to-download-page/
Adobe Illustrator CC Crack will make your illustration level upgrade by moving toward real modification purpose using adobe pro tools there ..
Reimagining Software Development and DevOps with Agentic AI
Reimagining Software Development and DevOps with Agentic AIMaxim Salnikov Key announcements about Developer Productivity from Microsoft Build 2025
Insurance Underwriting Software Enhancing Accuracy and Efficiency
Insurance Underwriting Software Enhancing Accuracy and EfficiencyInsurance Tech Services Insurance underwriting software enhances accuracy and speed by automating tasks and enabling real-time decisions. It’s essential for insurers aiming to stay agile, compliant, and customer-centric in the digital era. Explore More- https://www.damcogroup.com/insurance/underwriting-software
Using legacy code with micro frontends
- 1. Live peacefully with your legacy Ran Wahle
- 2. About me ● Programmer at Tikal ● Old ● Working for world peace
- 4. That peace - Between old and new
- 5. Let’s stop with militant sayings such as... Legacy code should Move away Who wrote this sh..t ? We are in 2018. Why use ...
- 6. You can’t beat legacy Rewriting is expensive You’ll have to reverse engineer old code Your management probably won’t let you
- 7. Micro frontends to the rescue If you can’t beat it, move away Have another micro app Interact with it
- 8. What do we need? SPA look & feel “Router-outlet” for micro apps Micro-service like integration
- 10. Our demo Three micro apps World cup teams (jQuery) World cup games (angular 6) World cup team details (angular 5 & Firebase) Shell app using micro frontends library
- 11. We had to use iframes… Because we are dealing with legacy
- 12. Make shell App
- 13. Register apps
- 14. Routing Each micro app gets its own url The shell app will present micro app by URL
- 15. Routing implementation Listen to popstate event Match route Invoke handler Read more
- 16. Blend legacy app in
- 17. Inner routes Whenever route change inside a micro app, the browser address bar should reflect that. When we reload, the micro app should be at Its last route
- 18. Events
- 19. Run setState on the micro-app
- 21. Change route in micro app
- 22. Service bus
- 23. Let’s reuse legacy app services
- 24. We have used iframe but... Iframes are too isolated We cannot really control their styling Heavy bundles Their performance are poor
- 25. Web components Less isolated but still independent We may create custom element Inside it, we may use whatever we want We can give up the global pub-sub and use the DOM But… it won’t help us with our efw years old legacy
- 26. Demo - Run one app as component
- 27. Let’s wrap We can use micro frontends to extend legacy code We blended some micro apps into one SPA We worked with inner route We have reused services And achieved world peace(?)
- 28. Thank you Ran Wahle @ranwahle [email protected] [email protected] Demo code: https://github.com/ranwahle/micro-frontends-demo