'MICROFRONTENDS WITH REACT' by Liliia Karpenko

•Download as PPTX, PDF•

1 like•117 views

This document discusses microfrontends architecture. It begins by explaining why an organization may want to use a microfrontends approach, such as when different teams in different locations need to work on the same project simultaneously. It then discusses some of the downsides of a monorepo approach and when a monorepo may be preferable to microfrontends. The document outlines some of the challenges microfrontends can present and why they can also be a good choice. It provides examples of how to divide an app into microfrontends, such as by routes, features, or a combination, and options for using different frameworks within microfrontends like web components, module federation, and iframes. It concludes by discussing testing and development

Technology

MicroFrontends
Architecture
August 2021
Karpenko
Liliia
Summer. Sea. JavaScript.

Experience: 9+ yearsof development, mostlyFE,JS, TSand
Reactoriented
Current Position:Team Lead(SoftwareDelivery Manager)at
Alteryx
Hobbies: Sport(Fitness/CrossFit/Volleyball/Tennis)+ Self-
development (Coaching/Psychology)+ Traveling +Music
(Guitar,Piano,Vocal)

Why are we talking about Micro Frontends?

Why MicroFrontends Architecture?
1. Some partsofapplication,canbeusedbyotherproducts
2. Differentteams in differentcountries,thatwill workonthe projectin differenttime zones,so MF is an
answer
3. Convey Law

Why MonoRepo is not for us?
1. A bunchofMR in 1repo, andwespendatonof time toreview them
2. Teamsshouldsomehow splitappbydirectories, orotherzonesofresponsibilityto makeit less painful
3. Resolveconflicts
4. Maintaintestsandpipeline
5. Nodiversity between backendandfrontend

Where Mono Repo can be good and when?
1. Thereisonly1 teamthatwill develop theapp
2. The appis notbig, it’s asmall simple app
3. Wedon’tspend alot oftime forintegrationtesting
4. Everythingis in 1 placeandfollow thesamerules

Why MicroFrontends can cause pain?
1. Youshouldinvest andspend timeonintegrationtesting tomakesureeverything workstogether
2. Some thingscanbedone fasterandeasier,if it is MonoRepo

Why MicroFrontends is a good choice?
1. Appsaresmall andit’seasytomaintain
2. Testsaresimplertorun,theysmall andindependent
3. It tookless time toruntestsin pipeline, means CI/CDbecomes smaller
4. Youcanchoosedifferentframeworksandtechnologiesforeach MFe, you
canuseReact/View/Angularandnothingcanstopyou!

What are options to divide App into MFe?
1. ByRoutes/Pages/Domains
2. ByFeatures/Differentpartsofapp
3. ByRoutesandFeatures

But first, answerthe question: do you
want to use one framework or different
ones?

Using different Frameworks
1. WebComponents
2. Webpackmodulefederation
3. Nginx
4. Iframes
5. NPM dependencies

Web Components
This technologyhelps youreusethe codeandcreateelements, thatareencapsulated
Createour own custom elements and then reuse them in different parts of the app.
Createyour custom elements andattach them tothe ShadowRoot of HTML
UseHTML template with <template> и <slot> components, andthen use simple DOM apiAPI,
clone elements, and attach them toDOM.

Webpack module federation
Multiple separatebuildsthatforma single application.

Nginx
This onlyworksforPage basedMFe, andthelogic ofserving the pages areonthe backendside.

Iframes
This isalsoavalid solution,so youcancreatedifferentApps,andthenrender eachof themin separateIframe

NPMdependencies
EachpartofApplication,is aseparateNPM module,
thatexportsas defaultsingle component,thatcanbe
thenimportedin themainApplication.
Main App
AppdividedbyRoutes

How to develop locallywithoutpublishingthe
packages?
npm link || yalc
This toolswill helpus switchtolocal version ofa package
Add local version of code to the node_modules dir
Createa link tolocal version of code, but does not replace the code in node_modules

Testing
1. Tests is written using react-testing-library
2. Add tests to each MFe
3. Test the main application for correct routing

Thank you for attention!
Want totalk?
Find me in a crowd =)

This document discusses approaches to managing Angular applications, including using multiple repositories versus a monorepository. It notes advantages and disadvantages of each, such as isolation but also hard dependencies with multiple repos, versus easy code sharing but potential messiness with a monorepo. The document then introduces Nrwl Nx as an open-source tool that helps manage monorepos for Angular apps, providing features like dependency graphs, smart rebuilds, and code generators. However, it cautions that using Nx requires following its structure patterns and configurations, and migrating codebases and teams to its approach can also require effort.

Composer

Zaib Un Nisa

Composer is a dependency manager for PHP projects that allows developers to declare and install dependencies and their versions. It guarantees consistency across team members and environments by locking dependency versions in a composer.lock file. To use Composer, a project's dependencies are defined in a composer.json file. Running "composer install" will install all dependencies into the vendor folder from the versions specified in composer.lock. Composer can be used with frameworks like Drupal and WordPress to manage their core files and dependencies.

What's New in ASP.NET Core 3

Andrea Dottor

TYPO3 & Composer

Armin Vieweg

Composer is a dependency manager for PHP that allows loading code packages from various locations into a PHP project. It resolves dependencies and allows updating packages easily. The document discusses how to use Composer to manage extensions in TYPO3 projects by defining extensions and versions in a composer.json file. It also covers creating custom Composer repositories and using PHPCI for continuous integration with Composer and TYPO3.

Migrating .NET Application to .NET Core

Baris Ceviz

.Net Core

Bertrand Le Roy

Short introduction - .net core and .net standard 2.0

Mark Lechtermann

This document discusses the history and relationship between .NET Core, .NET Framework, and .NET Standard. It explains that .NET Framework was not platform independent, while .NET Core is cross-platform but lacked Windows Forms and WPF support. .NET Standard was created to define a common set of APIs that can be targeted by frameworks like .NET Core and implemented by frameworks like .NET Framework, allowing libraries to work across platforms. The document notes that .NET Framework 4.7.1 added support for .NET Standard 2.0 by implementing around 200 missing APIs.

.Net Core

Software Infrastructure

.NET Core is an open source development platform maintained by Microsoft that allows developers to write cross-platform applications using C# and F# that run on Windows, Linux, and macOS. It is not based on .NET Framework or Mono, but is compatible with apps and libraries that target the .NET Standard Library. .NET Core focuses on cloud development and does not support all features of .NET Framework like Windows Forms. ASP.NET Core is also cross-platform and uses a modular package-based approach rather than depending on System.Web.dll. The .NET Core roadmap includes adding support for more platforms and features like WebSockets and SignalR in upcoming releases.

The document provides an overview of the Ruby programming language, describing its key features and syntax. Ruby is an interpreted, object-oriented scripting language created in 1993 by Yukihiro Matsumoto. It can run on various platforms and is used to develop web applications. The document outlines Ruby's support for objects, classes, modules and blocks as well as its clean, easy to learn syntax.

Lightning branches at RedMart (Js conf Asia 2014 Talk)

Ritesh Angural

Google App Engine - Java Style

Peter Lind

Not your fathers language c++

명신 김

The document discusses programming languages and C++. It provides statistics showing that C++ is the third most popular language according to the TIOBE index. Charts show the ages of C++ programmers and categories of C++ usage. The document discusses reasons for using C++, including efficiency, flexibility, abstraction, and productivity. It also discusses C++ usage in mobile and datacenter applications and new C++11 features.

Build and release iOS apps using Fastlane tools

Wise Engineering

Developing Cross Platform Applications with Golang

Erhan Yakut

Dockerizing react app

Malang QA Community

Getting started with .net on openSUSE (asp.net with c#)

Alin Alifah

This document provides an introduction to getting started with .NET on OpenSuse using ASP.NET with C#. It discusses .NET Core vs .NET Framework, the C# programming language, and provides steps to install .NET Core, create a sample Hello World application, and scaffold a simple ASP.NET Core application using Yeoman. It also demonstrates how to connect an ASP.NET Core application to a SQLite database using Entity Framework Core and generate a migration to create the database tables.

Introduction of bootstrap in angular

Knoldus Inc.

ASP.NET Core: The best of the new bits

Ken Cenerelli

Build testable react app

Malang QA Community

Using TypeScript, ESLint and Cypress Build Testable React App The document discusses using TypeScript, ESLint, and Cypress to build a testable React application. It provides an overview of each tool, including why they are useful. TypeScript adds types and catches errors. ESLint enforces code standards and quality. Cypress focuses on end-to-end testing of front-end apps and websites using JavaScript. The document recommends using these tools together to build a robust and well-tested React codebase.

Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...

Philipp Burgmer

Slides for my talk at Karlsruher Entwicklertag 2014. Visit us at http://www.thecodecampus.de Folien zu meinem Vortrag beim Karlsruher Entwicklertag 2014. Für die meisten Sprachen hat sich in den letzten Jahren und Jahrzehnten ein Tool als Build-System etabliert. Maven für Java, Make für Linux, SBT für Scala usw. und so fort. Doch was ist mit Web-Anwendungen die z.B. auf AngularJS basieren, bei denen die gesamte UI im Browser läuft, die immer komplexer werden, die immer mehr Code enthalten und aus immer mehr einzelnen Dateien bestehen. Wer oder besser gesagt womit baut man hier seine Anwendung? Wer führt Tests aus und wie liefere ich solche eine Anwendung aus? Welche Hürden sind hier zu nehmen? Mit Grunt hat sich 2013 ein modernes JavaScript Pendant zu Ant etabliert. Doch bei genauerer Betrachtung ist Grunt zwar moderner, aber trotzdem ähnlich abstrakt und low-level wie Ant. Hier kommen Bower und fabs ins Spiel: Bower kümmert sich um Dependencies und fabs konfiguriert Grunt um einen feature-reichen, anpassbaren Build zur Verfügung zu stellen. In meinem Vortrag beim Karlsruher Entwicklertag 2014 habe ich gezeigt wie mit Grunt, Bower und fabs ein moderner Build und Development-Workflow mit LiveReload, Test-Ausführung, Code-Minimierung und vielem mehr aufgebaut werden kann um auch große Web-Anwendungen mit mehreren Entwicklern schnell voran treiben und zuverlässig ausliefern zu können.

Building Good Containers for Python Applications

All Things Open

This document discusses best practices for building Python applications in containers. It recommends containers be fast, small, secure, and usable. Specific strategies covered include using binary wheels to minimize build steps, building Python from source in a separate stage for caching, using multi-stage builds to optimize layers and size, and generating self-contained binary wheels. The conclusion emphasizes thinking through container strategies before implementation to achieve performance and portability.

Node & Express as Workflow Tools

FITC

Node & Express as Workflow Tools “Enterprise” and “Node.js” are generally two terms which are rarely seen together, but developing on an (what are considered) “enterprise level” stack doesn’t mean you can’t sneak some Node.js into your workflow. This talk will cover using Node.js, Express, Grunt/Gulp, Commander to build custom workflow tools, mock APIs, and test suites to allow you to maintain sanity while working with more traditional environments. We will cover a simple use case for using Node and Express to smooth Front-end development workflow, and how to package your custom tool as an NPM module for others to install. Presented live at FITC's Spotlight: MEAN Stacks event held on March 28th, 2014 More info at FITC.ca

.NET Core in the Real World

Nate Barbettini

This document provides an overview of .NET Core and discusses getting started, the dotnet command line interface, apps and libraries, current frustrations, converting existing code, building for both .NET 4.5 and .NET Core, and concludes with a thank you. It recommends installing the .NET Core SDK, updating Visual Studio, using the dotnet CLI for building even when using Visual Studio, understanding how console, web, and test projects target frameworks differently than libraries, and dealing with issues like unfinished Visual Studio tooling and lack of NuGet package support for some frameworks.

High Productivity Web Development Workflow

Vũ Nguyễn

Pharo JS

Pharo

This document introduces PharoJS, a framework that allows developing applications in Pharo and running them on JavaScript and web platforms like browsers. It discusses how PharoJS allows developing the model in Pharo alone, integrating HTML, CSS and JS, and generating JavaScript from Pharo. It also outlines available tools like a playground, inspector and test support. Future plans include migrating to Pharo 6, improving coverage and tools, and addressing challenges like debugging between Pharo and JavaScript.

5 important languages for DevOps

Ravi Sagar

The document discusses 5 important programming languages for DevOps roles: Bash (importance 10/10), Perl (8/10), Python (8/10), Ruby (6/10), and Go (4/10). It notes that Bash is the top choice for automation tasks on Unix systems and is a very sought after DevOps skill, while Perl has a huge library of modules and is commonly required for DevOps jobs. Python is described as an all-purpose language used in applications like OpenStack. Ruby is important for configuration management tools like Puppet and Chef. Go is suitable for network and server applications.

PHP - Programming language war, does it matter

Mizno Kruge

Web development with Python

Raman Balyan

The document outlines the key parts of web applications including the front-end, middleware, and back-end. It then provides a roadmap for learning the four main clusters of knowledge needed for web development: back-end development using Python frameworks like Django and Flask, front-end development using HTML5, CSS, and JavaScript, version control using Git, and deployment using Heroku. Specific resources like Codecademy, Mozilla Developer Network, and books from ImportPython are recommended for learning each area.

Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS

KNOWARTH - 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.

Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...

Shift Conference

Good frontend development is hard. Scaling frontend development is even harder because you need to ensure that multiple teams can work on a big and complex project simultaneously and without any blockers. Today you often hear about micro frontends which are one of the more controversial Web topics. What are they? Are they worth all the fuzz? Should you implement them? As someone who worked at integrating this in Infobip’s Web Interface, I want to use our example to show you our way of thinking: how did we know that we have problems, how did we decide to approach the implementation of micro frontend architecture and why did we decide to go with it, and which problems we ran into. We will also look at alternate available possibilities useful for anyone.

What's hot

Ruby in mule

Ramakrishna kapa

Lightning branches at RedMart (Js conf Asia 2014 Talk)

Ritesh Angural

Google App Engine - Java Style

Peter Lind

Not your fathers language c++

명신 김

Build and release iOS apps using Fastlane tools

Wise Engineering

Developing Cross Platform Applications with Golang

Erhan Yakut

Dockerizing react app

Malang QA Community

Getting started with .net on openSUSE (asp.net with c#)

Alin Alifah

Introduction of bootstrap in angular

Knoldus Inc.

ASP.NET Core: The best of the new bits

Ken Cenerelli

Build testable react app

Malang QA Community

Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...

Philipp Burgmer

Building Good Containers for Python Applications

All Things Open

Node & Express as Workflow Tools

FITC

.NET Core in the Real World

Nate Barbettini

High Productivity Web Development Workflow

Vũ Nguyễn

Pharo JS

Pharo

5 important languages for DevOps

Ravi Sagar

PHP - Programming language war, does it matter

Mizno Kruge

Web development with Python

Raman Balyan

What's hot (20)

Ruby in mule

Lightning branches at RedMart (Js conf Asia 2014 Talk)

Google App Engine - Java Style

Not your fathers language c++

Build and release iOS apps using Fastlane tools

Developing Cross Platform Applications with Golang

Dockerizing react app

Getting started with .net on openSUSE (asp.net with c#)

Introduction of bootstrap in angular

ASP.NET Core: The best of the new bits

Build testable react app

Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...

Building Good Containers for Python Applications

Node & Express as Workflow Tools

.NET Core in the Real World

High Productivity Web Development Workflow

Pharo JS

5 important languages for DevOps

PHP - Programming language war, does it matter

Web development with Python

Similar to 'MICROFRONTENDS WITH REACT' by Liliia Karpenko

Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS

KNOWARTH - Software Development Company

Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...

Shift Conference

The distinct advantages of using PHP-Symfony Framework

Mindfire LLC

A PHP application’s standard foundation is Symfony. It offers a set of reusable components that may be utilized in other applications. About 30 decoupled and reusable PHP components, called Symfony Components, are utilized to create this application. Because Symfony eliminates reactive coding tasks, it is especially suitable for enterprise-driven complex applications. As a developer community, Symfony was renowned for its friendliness and availability. Developers may add their modules to the framework because it is available under an Open Source license.

Why You Should Use MERN Stack for Startup Apps?

Pixel Crayons

If you have no idea what MERN stands for, check out my explanation in this article first! This insightful guide will help you learn about the benefits of using the MERN stack and why it’s perfect for your next web application project. In a nutshell, The MERN Stack refers to four technologies: MongoDB, ExpressJS, ReactJS, and Node.js. MongoDB is a document-oriented DBMS that allows you to store data in JSON-like format.

OdessaJs 2020 - How to build your first micro frontend in a matter of minutes

Vlad Fedosov

This document discusses microfrontends, which apply a microservices architecture approach to user interfaces. It defines microfrontends as allowing independent teams to own distinct features from database to UI. The document outlines benefits like faster development, clear ownership, and improved delivery speed. It provides an example migration approach from a legacy monolithic application to microfrontends. Challenges with microfrontends like routing and error handling are also discussed. The document recommends using a framework to address these challenges rather than building the infrastructure yourself.

'How to build your first micro frontend in a matter of minutes' by Vladlen Fe...

OdessaJS Conf

Introduction to Docker and Containers- Learning Simple

Sandeep Hijam

Docker is an application that generates container images which allow microservices applications to be developed and run. A container image contains all the dependencies of an application. Microservices break applications into small, independent services that communicate via APIs. Docker is like a web server that runs container code. Containers are the actual application code, while Docker generates the container images and hosts the running containers. Microservices improve scalability and maintainability by separating functions into independently deployable services.

Teamwork Presentation

Pietro Polsinelli

Teamwork is a web-based project management and communication tool that allows users to coordinate multiple open projects from a single integrated environment. It is designed to be easy to use while also supporting complex organizational needs through flexible security and data models. The open source application is built on Java and Hibernate and is compatible with all major browsers and database systems.

OpenNTF Updates 03/05/13

Niklas Heidloff

The document discusses updates from OpenNTF. It summarizes the results of a survey on OpenNTF project usage. It then describes upcoming social app development contests sponsored by OpenNTF and others, with prizes for the top submissions. It also discusses CollaborationToday.info, a curated news site for IBM collaboration solutions professionals that was developed by several IBM partners using XPages technology.

Roadmap to Become a Pro in MERN Stack Development

75waytechnologies

Everything is new for you if you’re a newbie in the tech world. But one thing you are sure about is becoming a MERN stack developer. Today, MERN stack development is a lucrative career that opens several doors of opportunities. But do you know the roadmap to becoming a MERN stack developer? What are the technologies you should learn at the tip, and in what order? So many questions might be hitting your mind, and you definitely want the answer to all. Right? Well, this guide got you covered. In this blog post, we have rounded up about mastering this technology and becoming a skilled MERN stack developer. So, what are you waiting for? Why not take a tour of this guide? Let’s start.

Introducing symfony

Wildan Maulana

Symfony is a PHP web application framework that separates a web application's business rules, server logic, and presentation views. It automates common tasks like internationalization, forms, caching, and security to help developers focus on application specifics. Key features include being database engine-independent, following conventions over configurations, and providing tools for testing, debugging, and deploying applications. The document discusses Symfony's features and concepts like object-oriented programming, object-relational mapping, and rapid application development that are important for understanding how to use the framework.

What Web Framework To Use?

Kasra Khosravi

A great idea can be built with almost any technology. The success or failure of your project has more to do with vision, leadership, execution, and market than technological choices. Besides the vision, a lot of startups focus on culture. what isn’t often mentioned is that the technical decisions will have a direct effect on the company culture. Great things have been built with each of the technologies. But they do come with a culture. The purpose of this presentation is to help developers, managers, founders, etc. to make an insightful decision about the framework they want to use to create their product.

Node.JS Vs PHP: Which Is The Top Server-Side Programming Language?

Pixel Crayons

OOP Java

Saif Kassim

The course aims to provide you with an understanding of the fundamental concepts involved in object-oriented programming (object, class, protocol, hierarchy, inheritance, encapsulation, polymorphism and collaboration). The programming language you will use is Java. However, the purpose of the course is not to teach you the minutiae of the Java language, but rather to teach you fundamental object-oriented programming concepts and skills that will be transferable to any object¬ oriented language

Exploring My Career: an Exclusive Interview EN

Dennys José Márquez Reyes

Pareto will tell you to stop using your ORM - Mateo Collina

Wey Wey Web

This document discusses choosing technologies for software projects. It argues that ORMs do not scale well and promote spaghetti code because models take on too many responsibilities. Modular monoliths and microservices help address these issues by separating concerns. The author promotes Platformatic as a tool that can remove repetitive tasks while still allowing complex features by extending databases through code.

A comparative study of laravel and symfony PHP frameworks

IJECEIAES

With the current explosion of Information Systems, the market offers a wide range of interesting technological solutions. Yet, this does not mean adopting a technology without considering its impact on the existing information system and user expectations. It is recommended to identify and implement the technological solutions most suited to the Information Systems strategy. Therefore, new methods are emerging and design tools are still evolving; the PHP Frameworks are part of it, which open up new perspectives in terms of information system enrichment. In this context, this paper focuses on the elaboration of a comparative study between Laravel, symfony framworks, which are the most popular PHP frameworks. Thus, it provides an effective comparison model that merges seven dimensions: Features, Multilingual, System requirements, Technical architecture, Code Organization, Continuous Integration (CI) and finally Documentation and learning curve dimension. Results show that our model can be beneficial for IT project developers to select the suitable PHP Framework.

Which Tools Are The Best For Symfony Projects_.pdf

Moon Technolabs Pvt. Ltd.

Pairing with People

Jeremiah Landi

What the heck is Eclipse Modeling and why should you care !

Cédric Brun

This document introduces Eclipse Modeling and explains why it is useful for both building applications and dedicated modeling tools. It provides an overview of the Eclipse Modeling Project structure and subprojects. It demonstrates how to use EMF and Acceleo to quickly generate documentation based on a model of software features across different versions. With a few hours of work, Eclipse Modeling technologies can be used to automate tasks and produce deliverables from a consistent model.

Similar to 'MICROFRONTENDS WITH REACT' by Liliia Karpenko (20)

Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS

Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...

The distinct advantages of using PHP-Symfony Framework

Why You Should Use MERN Stack for Startup Apps?

OdessaJs 2020 - How to build your first micro frontend in a matter of minutes

'How to build your first micro frontend in a matter of minutes' by Vladlen Fe...

Introduction to Docker and Containers- Learning Simple

Teamwork Presentation

OpenNTF Updates 03/05/13

Roadmap to Become a Pro in MERN Stack Development

Introducing symfony

What Web Framework To Use?

Node.JS Vs PHP: Which Is The Top Server-Side Programming Language?

OOP Java

Exploring My Career: an Exclusive Interview EN

Pareto will tell you to stop using your ORM - Mateo Collina

A comparative study of laravel and symfony PHP frameworks

Which Tools Are The Best For Symfony Projects_.pdf

Pairing with People

What the heck is Eclipse Modeling and why should you care !

More from OdessaJS Conf

'GraphQL Schema Design' by Borys Mohyla. OdessaJS'2021

OdessaJS Conf

'How i came up with my talk' by Yurii Artiukh. OdessaJS'2021

OdessaJS Conf

The document describes the process by which someone decided on a topic for their presentation. They initially considered topics like animations or differential equations. After seeing an animation example, they wanted to create one themselves from 0 to 1, but struggled for over a day to get the math right. They eventually landed on an exponential function that achieved the desired animation effect over time. They questioned why they went through so much effort to figure this out.

"Is there life in react without redux" by Babich Sergiy. OdessaJS'2021

OdessaJS Conf

Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...

OdessaJS Conf

The document discusses various approaches for performing contract protection on the frontend side such as integration testing, law-driven contract testing, consumer-driven contract testing, and runtime checking. It then focuses on runtime checking, explaining what it is and how it can add an extra step to quality assurance by allowing integration errors to be responded to in real time. Details are provided on Oleksii Pavlenko who is an engineering manager, PhD holder, and former professional basketball player with interests in surfing, snowboarding, and other boardsports.

Андрій Троян. Розробка мікросервісів з NestJS. OdessaJS'2021

OdessaJS Conf

This document discusses NestJS, a framework for building Node.js microservices. It introduces microservices and their key characteristics like loose coupling and independent deployment. It then covers how NestJS provides an architecture that allows for highly testable, scalable, and maintainable applications. Specific NestJS features are summarized like modules, controllers, providers, pipes, error handling, and decorators. Finally, it discusses using NestJS for microservices, including different transporters and message styles like request-response and event-based communication.

Олексій Гончар "Використання Electron в розробці корпоративної відео-мессeндж...

OdessaJS Conf

Максим Климишин "Що такого особливого у пропозиції вартості шаблону Micro Fro...

OdessaJS Conf

Micro frontends is a design pattern that splits an application into multiple independently deployable frontend applications to reduce dependencies between teams and improve the speed of delivery. This approach can reduce execution and delivery risks like long cycle times and inconsistent user experiences. It allows for more autonomous teams and faster time to market. However, it also introduces some risks around broken user interfaces if components are not built consistently. Adopting a micro frontends approach requires buy-in from engineering leadership as well as change management to shift teams away from old habits.

Павло Галушко. GOOD CODE MYTHS. OdessaJS'2021

OdessaJS Conf

The document discusses myths about writing good JavaScript code. Some myths addressed include: that good code is only for aesthetics; that programming is only about writing code; and that principles and patterns from object-oriented programming do not apply to JavaScript. The presentation argues that good code is important for business reasons like maintenance and refactoring costs. It emphasizes writing testable code, following style guides, and applying design principles universally.

"NODEJS & GRAPHQL COOKBOOK. LET’S TALK ABOUT MICRO-SERVICES" by Антон Чередні...

OdessaJS Conf

'IS THERE JAVASCRIPT ON SWAGGER PLUGINS?' by Dmytro Gusev

OdessaJS Conf

This document discusses JavaScript plugins for the Swagger API documentation framework. It begins with an overview of Swagger and related tools like swagger-editor. It then covers challenges with customizing Swagger and different approaches tried, like using custom Swagger definitions or closures. The main topics covered are the plugin system architecture, including available React components, Redux state management, and plugin APIs. It asks several questions about how to interact with and extend the plugin system.

'ETHEREUM SMART CONTRACTS ON JS' by Yaroslav Dvorovenko

OdessaJS Conf

This document discusses Ethereum, smart contracts, and blockchain technology. It defines Ethereum as a cryptocurrency platform that allows for decentralized services and applications through the use of smart contracts written in the Solidity programming language. Smart contracts are computer programs that automatically execute transactions, actions, and legally relevant events without the need for intermediaries. The document provides examples of how smart contracts could be used for elections, digital currency, and instant money transfers with low fees. It also discusses tools like Ganache, Truffle, and Web3.js that allow for developing, testing, and interacting with smart contracts and decentralized applications.

'GOLANG USAGE IN DEVELOPMENT OF NODE.JS APPLICATIONS (NODE.JS: IN GO WE TRUST...

OdessaJS Conf

'Web performance metrics' BY ROMAN SAVITSKYI at OdessaJS'2020

OdessaJS Conf

Let's brainstorm web-productivity? It's easy to get lost in different sources - so how to choose them wisely? Main topics: Metrics, best practices, problems and solutions Вебпродуктивність. Що ще тут розповісти? Всі ми знаємо, що це важливо, як не отримувати таких проблем і до чого це призводить. Але якщо необхідно вирішити проблему серед тонни ресурсів важко обрати потрібний. Моя доповідь не тільки про рішення проблеми, а про находження інструментів та метрик для рішення проблеми. Чому саме ці метрики варто використовувати і як з цим жити. Метрики, практики, проблеми, рішення. Які різні поняття, а насправді це цепочки, які нам разом необхідно виставити в логічний ряд. Запрошую Вас побрейнштормити разом!

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

OdessaJS Conf

'JavaScript was invented in Odessa' by DMITRIY GUSEV at OdessaJS'2020

OdessaJS Conf

'Why svelte' by BORYS MOHYLA at OdessaJS'2020

OdessaJS Conf

'Effective node.js development' by Viktor Turskyi at OdessaJS'2020

OdessaJS Conf

'Tensorflow.js in real life' by Pavlo Galushko at OdessaJS'2020

OdessaJS Conf

'React+d3=LOVE' by Illia Olenchenko at OdessaJS'2020

OdessaJS Conf

This talk will be around how to combine React and D3 to have amazing charts in your product. Both frameworks have its own position on how UI should be managed, so it is important to draw a line where each framework would benefit you more. React is just great for rendering Views. D3 in its place is the richest framework for building data-driven applications. Historically D3 provided kind of imperative way to manipulate DOM with the direct access to it. You may see a lot of examples on https://bl.ocks.org/ which are great but don’t really connect with React way of manipulating the view. How can we combine them elegantly? You'll see that with live demo session at OdessaJS.

'How to build efficient backend based on microservice architecture' by Anton ...

OdessaJS Conf

This speech about micro-services, approaches, and practices in their construction. How to effectively build communication between micro-services and what approaches are commonly used for this. We will talk a little about distributed transactions. Will touch the topic of infrastructure, monitoring, and scaling components. I want to inspire my listeners to develop themselves in the direction of backend development. Force to look towards scalable application architecture. You cannot find this information in the documentation :) This speech will also consist of real-life examples.

More from OdessaJS Conf (20)

'GraphQL Schema Design' by Borys Mohyla. OdessaJS'2021

'How i came up with my talk' by Yurii Artiukh. OdessaJS'2021

"Is there life in react without redux" by Babich Sergiy. OdessaJS'2021

Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...

Андрій Троян. Розробка мікросервісів з NestJS. OdessaJS'2021

Олексій Гончар "Використання Electron в розробці корпоративної відео-мессeндж...

Максим Климишин "Що такого особливого у пропозиції вартості шаблону Micro Fro...

Павло Галушко. GOOD CODE MYTHS. OdessaJS'2021

"NODEJS & GRAPHQL COOKBOOK. LET’S TALK ABOUT MICRO-SERVICES" by Антон Чередні...

'IS THERE JAVASCRIPT ON SWAGGER PLUGINS?' by Dmytro Gusev

'ETHEREUM SMART CONTRACTS ON JS' by Yaroslav Dvorovenko

'GOLANG USAGE IN DEVELOPMENT OF NODE.JS APPLICATIONS (NODE.JS: IN GO WE TRUST...

'Web performance metrics' BY ROMAN SAVITSKYI at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'JavaScript was invented in Odessa' by DMITRIY GUSEV at OdessaJS'2020

'Why svelte' by BORYS MOHYLA at OdessaJS'2020

'Effective node.js development' by Viktor Turskyi at OdessaJS'2020

'Tensorflow.js in real life' by Pavlo Galushko at OdessaJS'2020

'React+d3=LOVE' by Illia Olenchenko at OdessaJS'2020

'How to build efficient backend based on microservice architecture' by Anton ...

Recently uploaded

Fueling AI with Great Data with Airbyte Webinar

Zilliz

Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors

DianaGray10

Join us to learn how UiPath Apps can directly and easily interact with prebuilt connectors via Integration Service--including Salesforce, ServiceNow, Open GenAI, and more. The best part is you can achieve this without building a custom workflow! Say goodbye to the hassle of using separate automations to call APIs. By seamlessly integrating within App Studio, you can now easily streamline your workflow, while gaining direct access to our Connector Catalog of popular applications. We’ll discuss and demo the benefits of UiPath Apps and connectors including: Creating a compelling user experience for any software, without the limitations of APIs. Accelerating the app creation process, saving time and effort Enjoying high-performance CRUD (create, read, update, delete) operations, for seamless data management. Speakers: Russell Alfeche, Technology Leader, RPA at qBotic and UiPath MVP Charlie Greenberg, host

How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf

Chart Kalyan

"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk

Fwdays

At this talk we will discuss DDoS protection tools and best practices, discuss network architectures and what AWS has to offer. Also, we will look into one of the largest DDoS attacks on Ukrainian infrastructure that happened in February 2022. We'll see, what techniques helped to keep the web resources available for Ukrainians and how AWS improved DDoS protection for all customers based on Ukraine experience

Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency

ScyllaDB

[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...

Jason Yip

The typical problem in product engineering is not bad strategy, so much as “no strategy”. This leads to confusion, lack of motivation, and incoherent action. The next time you look for a strategy and find an empty space, instead of waiting for it to be filled, I will show you how to fill it in yourself. If you’re wrong, it forces a correction. If you’re right, it helps create focus. I’ll share how I’ve approached this in the past, both what works and lessons for what didn’t work so well.

Generating privacy-protected synthetic data using Secludy and Milvus

Zilliz

During this demo, the founders of Secludy will demonstrate how their system utilizes Milvus to store and manipulate embeddings for generating privacy-protected synthetic data. Their approach not only maintains the confidentiality of the original data but also enhances the utility and scalability of LLMs under privacy constraints. Attendees, including machine learning engineers, data scientists, and data managers, will witness first-hand how Secludy's integration with Milvus empowers organizations to harness the power of LLMs securely and efficiently.

GNSS spoofing via SDR (Criptored Talks 2024)

Javier Junquera

In the realm of cybersecurity, offensive security practices act as a critical shield. By simulating real-world attacks in a controlled environment, these techniques expose vulnerabilities before malicious actors can exploit them. This proactive approach allows manufacturers to identify and fix weaknesses, significantly enhancing system security. This presentation delves into the development of a system designed to mimic Galileo's Open Service signal using software-defined radio (SDR) technology. We'll begin with a foundational overview of both Global Navigation Satellite Systems (GNSS) and the intricacies of digital signal processing. The presentation culminates in a live demonstration. We'll showcase the manipulation of Galileo's Open Service pilot signal, simulating an attack on various software and hardware systems. This practical demonstration serves to highlight the potential consequences of unaddressed vulnerabilities, emphasizing the importance of offensive security practices in safeguarding critical infrastructure.

Mutation Testing for Task-Oriented Chatbots

Pablo Gómez Abajo

Conversational agents, or chatbots, are increasingly used to access all sorts of services using natural language. While open-domain chatbots - like ChatGPT - can converse on any topic, task-oriented chatbots - the focus of this paper - are designed for specific tasks, like booking a flight, obtaining customer support, or setting an appointment. Like any other software, task-oriented chatbots need to be properly tested, usually by defining and executing test scenarios (i.e., sequences of user-chatbot interactions). However, there is currently a lack of methods to quantify the completeness and strength of such test scenarios, which can lead to low-quality tests, and hence to buggy chatbots. To fill this gap, we propose adapting mutation testing (MuT) for task-oriented chatbots. To this end, we introduce a set of mutation operators that emulate faults in chatbot designs, an architecture that enables MuT on chatbots built using heterogeneous technologies, and a practical realisation as an Eclipse plugin. Moreover, we evaluate the applicability, effectiveness and efficiency of our approach on open-source chatbots, with promising results.

What is an RPA CoE? Session 1 – CoE Vision

DianaGray10

Columbus Data & Analytics Wednesdays - June 2024

Jason Packer

Nordic Marketo Engage User Group_June 13_ 2024.pptx

MichaelKnudsen27

AppSec PNW: Android and iOS Application Security with MobSF

Ajin Abraham

Mobile Security Framework - MobSF is a free and open source automated mobile application security testing environment designed to help security engineers, researchers, developers, and penetration testers to identify security vulnerabilities, malicious behaviours and privacy concerns in mobile applications using static and dynamic analysis. It supports all the popular mobile application binaries and source code formats built for Android and iOS devices. In addition to automated security assessment, it also offers an interactive testing environment to build and execute scenario based test/fuzz cases against the application. This talk covers: Using MobSF for static analysis of mobile applications. Interactive dynamic security assessment of Android and iOS applications. Solving Mobile app CTF challenges. Reverse engineering and runtime analysis of Mobile malware. How to shift left and integrate MobSF/mobsfscan SAST and DAST in your build pipeline.

5th LF Energy Power Grid Model Meet-up Slides

DanBrown980551

5th Power Grid Model Meet-up It is with great pleasure that we extend to you an invitation to the 5th Power Grid Model Meet-up, scheduled for 6th June 2024. This event will adopt a hybrid format, allowing participants to join us either through an online Mircosoft Teams session or in person at TU/e located at Den Dolech 2, Eindhoven, Netherlands. The meet-up will be hosted by Eindhoven University of Technology (TU/e), a research university specializing in engineering science & technology. Power Grid Model The global energy transition is placing new and unprecedented demands on Distribution System Operators (DSOs). Alongside upgrades to grid capacity, processes such as digitization, capacity optimization, and congestion management are becoming vital for delivering reliable services. Power Grid Model is an open source project from Linux Foundation Energy and provides a calculation engine that is increasingly essential for DSOs. It offers a standards-based foundation enabling real-time power systems analysis, simulations of electrical power grids, and sophisticated what-if analysis. In addition, it enables in-depth studies and analysis of the electrical power grid’s behavior and performance. This comprehensive model incorporates essential factors such as power generation capacity, electrical losses, voltage levels, power flows, and system stability. Power Grid Model is currently being applied in a wide variety of use cases, including grid planning, expansion, reliability, and congestion studies. It can also help in analyzing the impact of renewable energy integration, assessing the effects of disturbances or faults, and developing strategies for grid control and optimization. What to expect For the upcoming meetup we are organizing, we have an exciting lineup of activities planned: -Insightful presentations covering two practical applications of the Power Grid Model. -An update on the latest advancements in Power Grid -Model technology during the first and second quarters of 2024. -An interactive brainstorming session to discuss and propose new feature requests. -An opportunity to connect with fellow Power Grid Model enthusiasts and users.

Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians

Neo4j

Y-Combinator seed pitch deck template PP

c5vrf27qcz

“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...

Edge AI and Vision Alliance

For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2024/06/how-axelera-ai-uses-digital-compute-in-memory-to-deliver-fast-and-energy-efficient-computer-vision-a-presentation-from-axelera-ai/ Bram Verhoef, Head of Machine Learning at Axelera AI, presents the “How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-efficient Computer Vision” tutorial at the May 2024 Embedded Vision Summit. As artificial intelligence inference transitions from cloud environments to edge locations, computer vision applications achieve heightened responsiveness, reliability and privacy. This migration, however, introduces the challenge of operating within the stringent confines of resource constraints typical at the edge, including small form factors, low energy budgets and diminished memory and computational capacities. Axelera AI addresses these challenges through an innovative approach of performing digital computations within memory itself. This technique facilitates the realization of high-performance, energy-efficient and cost-effective computer vision capabilities at the thin and thick edge, extending the frontier of what is achievable with current technologies. In this presentation, Verhoef unveils his company’s pioneering chip technology and demonstrates its capacity to deliver exceptional frames-per-second performance across a range of standard computer vision networks typical of applications in security, surveillance and the industrial sector. This shows that advanced computer vision can be accessible and efficient, even at the very edge of our technological ecosystem.

Essentials of Automations: Exploring Attributes & Automation Parameters

Safe Software

Building automations in FME Flow can save time, money, and help businesses scale by eliminating data silos and providing data to stakeholders in real-time. One essential component to orchestrating complex automations is the use of attributes & automation parameters (both formerly known as “keys”). In fact, it’s unlikely you’ll ever build an Automation without using these components, but what exactly are they? Attributes & automation parameters enable the automation author to pass data values from one automation component to the next. During this webinar, our FME Flow Specialists will cover leveraging the three types of these output attributes & parameters in FME Flow: Event, Custom, and Automation. As a bonus, they’ll also be making use of the Split-Merge Block functionality. You’ll leave this webinar with a better understanding of how to maximize the potential of automations by making use of attributes & automation parameters, with the ultimate goal of setting your enterprise integration workflows up on autopilot.

Choosing The Best AWS Service For Your Website + API.pptx

Brandon Minnick, MBA

Have you ever been confused by the myriad of choices offered by AWS for hosting a website or an API? Lambda, Elastic Beanstalk, Lightsail, Amplify, S3 (and more!) can each host websites + APIs. But which one should we choose? Which one is cheapest? Which one is fastest? Which one will scale to meet our needs? Join me in this session as we dive into each AWS hosting service to determine which one is best for your scenario and explain why!

Programming Foundation Models with DSPy - Meetup Slides

Zilliz

Recently uploaded (20)

Fueling AI with Great Data with Airbyte Webinar

Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors

How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf

"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk

Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency

[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...

Generating privacy-protected synthetic data using Secludy and Milvus

GNSS spoofing via SDR (Criptored Talks 2024)

Mutation Testing for Task-Oriented Chatbots

What is an RPA CoE? Session 1 – CoE Vision

Columbus Data & Analytics Wednesdays - June 2024

Nordic Marketo Engage User Group_June 13_ 2024.pptx

AppSec PNW: Android and iOS Application Security with MobSF

5th LF Energy Power Grid Model Meet-up Slides

Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians

Y-Combinator seed pitch deck template PP

“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...

Essentials of Automations: Exploring Attributes & Automation Parameters

Choosing The Best AWS Service For Your Website + API.pptx

Programming Foundation Models with DSPy - Meetup Slides

'MICROFRONTENDS WITH REACT' by Liliia Karpenko

1. MicroFrontends Architecture August 2021 Karpenko Liliia Summer. Sea. JavaScript.

2. Experience: 9+ yearsof development, mostlyFE,JS, TSand Reactoriented Current Position:Team Lead(SoftwareDelivery Manager)at Alteryx Hobbies: Sport(Fitness/CrossFit/Volleyball/Tennis)+ Self- development (Coaching/Psychology)+ Traveling +Music (Guitar,Piano,Vocal)

3. Why are we talking about Micro Frontends?

5. Why MicroFrontends Architecture? 1. Some partsofapplication,canbeusedbyotherproducts 2. Differentteams in differentcountries,thatwill workonthe projectin differenttime zones,so MF is an answer 3. Convey Law

6. Why MonoRepo is not for us? 1. A bunchofMR in 1repo, andwespendatonof time toreview them 2. Teamsshouldsomehow splitappbydirectories, orotherzonesofresponsibilityto makeit less painful 3. Resolveconflicts 4. Maintaintestsandpipeline 5. Nodiversity between backendandfrontend

7. Where Mono Repo can be good and when? 1. Thereisonly1 teamthatwill develop theapp 2. The appis notbig, it’s asmall simple app 3. Wedon’tspend alot oftime forintegrationtesting 4. Everythingis in 1 placeandfollow thesamerules

8. Why MicroFrontends can cause pain? 1. Youshouldinvest andspend timeonintegrationtesting tomakesureeverything workstogether 2. Some thingscanbedone fasterandeasier,if it is MonoRepo

9. Why MicroFrontends is a good choice? 1. Appsaresmall andit’seasytomaintain 2. Testsaresimplertorun,theysmall andindependent 3. It tookless time toruntestsin pipeline, means CI/CDbecomes smaller 4. Youcanchoosedifferentframeworksandtechnologiesforeach MFe, you canuseReact/View/Angularandnothingcanstopyou!

10. How to organize MFe architecture?

11. Micro FrontendApps

12. What are options to divide App into MFe? 1. ByRoutes/Pages/Domains 2. ByFeatures/Differentpartsofapp 3. ByRoutesandFeatures

13. Putting all together

14. But first, answerthe question: do you want to use one framework or different ones?

15. Using different Frameworks 1. WebComponents 2. Webpackmodulefederation 3. Nginx 4. Iframes 5. NPM dependencies

16. Web Components This technologyhelps youreusethe codeandcreateelements, thatareencapsulated Createour own custom elements and then reuse them in different parts of the app. Createyour custom elements andattach them tothe ShadowRoot of HTML UseHTML template with <template> и <slot> components, andthen use simple DOM apiAPI, clone elements, and attach them toDOM.

17. Webpack module federation Multiple separatebuildsthatforma single application.

18. Nginx This onlyworksforPage basedMFe, andthelogic ofserving the pages areonthe backendside.

19. Iframes This isalsoavalid solution,so youcancreatedifferentApps,andthenrender eachof themin separateIframe

20. NPMdependencies EachpartofApplication,is aseparateNPM module, thatexportsas defaultsingle component,thatcanbe thenimportedin themainApplication. Main App AppdividedbyRoutes

21.

22. It’s time to see some code =)

23. How to develop locallywithoutpublishingthe packages? npm link || yalc This toolswill helpus switchtolocal version ofa package Add local version of code to the node_modules dir Createa link tolocal version of code, but does not replace the code in node_modules

24. What about testing?

25. Testing 1. Tests is written using react-testing-library 2. Add tests to each MFe 3. Test the main application for correct routing

26. Thank you for attention! Want totalk? Find me in a crowd =)

'MICROFRONTENDS WITH REACT' by Liliia Karpenko

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 'MICROFRONTENDS WITH REACT' by Liliia Karpenko

Similar to 'MICROFRONTENDS WITH REACT' by Liliia Karpenko (20)

More from OdessaJS Conf

More from OdessaJS Conf (20)

Recently uploaded

Recently uploaded (20)

'MICROFRONTENDS WITH REACT' by Liliia Karpenko