Microservices on the client side

Apr 22, 20171 like697 views

Angular, React and React Native - seemingly completely different frameworks, but can they work together in harmony under one application? Consider 10 different teams working in parallel, each relying on their favorite framework. Can we combine the product of these 10 teams into one mega app? In this talk we will discuss the design principles and architecture of large scale multi-tenant mobile and web applications that serve as a foundation for the Wix Mobile App and Wix Business Manager for the web. You will learn how to apply those principles and techniques at scale of over 10 teams, while embracing existing frameworks and building sound mega apps together.

Microservices on
the client side
Sergey N. Bolshchikov, Team Leader @ Wix
linkedin/bolshchikov github.com/bolshchikov@bolshchikovsergeyb@wix.com

Hi.
I am Sergey,
❖ team lead @ Wix,
❖ curator of js-must-watch list,
❖ creator of YGLF Conference.
Kiev

AGENDA
Project evolution
How it works?
When can you apply it?

Can
you…?
Sure,
PR...
Somebody else
comes...

Can
you…?
Sure,
PR...
Somebody else
comes...
WTF?

Can
you…?
Sure,
PR...
WTF??
Somebody else
comes...
WTF?

Can
you…?
NO!
Screw it
Somebody else
comes...

Can
you…?
NO!
Screw it
iframe!
Somebody else
comes...

I need
x…?
It will
take a...
Somebody else
comes...

I need
x…?
It will
take a...
Somebody else
comes...
post
message

I need
x…?
It will
take a...
fu**ing
iframe :(
Somebody else
comes...
post
message

8
secs??
We starting to
having issues...

8
secs??
We starting to
having issues...
well,
iframes...

8
secs??
fu**ing
iframe :(
We starting to
having issues...
well,
iframes...

let’s
SSR!
We starting to
having limits...

let’s
SSR!
We starting to
having limits...
well,
iframes...

let’s
SSR!
fu**ing
iframe :(
We starting to
having limits...
well,
iframes...

1. Single-page application with
lazy-loaded isolated modules

1. Single-page application with
lazy-loaded isolated modules
2. Support existing independent
react/angular applications

render angular inside react application
Angular app
React
component
React
component
React
component
what we usually have...

So what do we want?
What’s the ideal solution?

render angular inside react applicationwhat we really want is...
React app

render angular inside react applicationwhat we really want is...
Angular app
React app

render angular inside react applicationwhat we really want is...
Angular app
React app
Angular
app

render angular inside react applicationwhat we really want is...
Angular app
React app
Angular
app
React
app

Angular app
React app
Angular app
React app

https://github.com/bolshchikov-public/react-module-container-example

https://github.com/wix/react-module-container

Thank You
linkedin/bolshchikov github.com/bolshchikov@bolshchikovsergeyb@wix.com

Q&A
linkedin/bolshchikov github.com/bolshchikov@bolshchikovsergeyb@wix.com

Useful Links
1. https://github.com/wix/react-module-container
2. https://github.com/bolshchikov-public/react-module-container-example
3. Angular Lazy Component
4. React Lazy Component
5. sergeyb@wix.com

The document discusses best practices, tips, performance, and debugging strategies for Protractor, an end-to-end testing framework for AngularJS applications. It addresses common problems like unknown window sizes, fragile tests due to small HTML changes, and long test run times. Solutions include setting the window size before tests, using page objects to abstract the HTML, enabling sharding to run tests in parallel, and integrating with IDEs for debugging. The tips are from Sergey Bolshchikov, a developer advocate and creator of resources for front-end developers.

Continuous Delivery for Front-End EngineersSergey Bolshchikov

The document discusses continuous delivery practices for front-end engineers. It outlines seven stages of a continuous delivery process: 1) efficiently reusing code through tools like NPM, Bower, and Yeoman, 2) test-driven development using Karma, Jasmine, Mocha and Protractor, 3) integrating continuously, 4) deploying often through automation to reduce risks, 5) monitoring performance and errors, 6) using feature toggles to deploy unfinished features, and 7) conducting A/B tests to gradually release new features. Moving from traditional waterfall to continuous delivery processes allows deploying from 4 times a year to 50 times a day and building a culture of continuous delivery.

Зачем нужен EmberJS, если мне хвататет jQuerySergey Bolshchikov

Ember Reusable Components and WidgetsSergey Bolshchikov

The document discusses reusable Ember components and widgets. It begins with an introduction to web components and how Ember components have evolved from before and after Ember RC6. It then provides steps to build a reusable progress bar component in Ember, including defining a template, passing parameters, customizing the component, adding content and actions. Key aspects covered are using a 'components/' prefixed template name, parameterizing components, extending the Ember.Component class for customization, using {{yield}} to add content, and the sendAction method to invoke actions on the hosting controller.

Front End Development: The Important PartsSergey Bolshchikov

Web Projects: From Theory To PracticeSergey Bolshchikov

AngularJS Basics with ExampleSergey Bolshchikov

This document provides a summary of the AngularJS framework. It discusses the following key points in 3 sentences: 1. AngularJS aims to make HTML better suited for building applications by teaching the browser new syntax like directives. This allows more of the application logic to be handled in the declarative HTML instead of JavaScript code. 2. Angular follows an MVC pattern where the controller contains the business logic and data, the view displays the data through bindings, and the scope acts as a synchronization mechanism between the model and view. 3. Features like data binding, directives, dependency injection and routing allow building dynamic and interactive single-page applications by synchronizing the model and view through declarative templates and separating concerns

Backbone Basics with ExamplesSergey Bolshchikov

The document discusses the components and utilities of the Backbone.js framework. It describes the key components of Backbone - Models, Collections, Views - and how they work together. Models contain interactive data and bind attributes to the DOM. Collections provide methods to manage ordered sets of models. Views handle templating and user interactions. The document also covers utilities like routing and events that help connect components.

JS Single-Page Web App EssentialsSergey Bolshchikov

Secure Test Infrastructure: The Backbone of Trustworthy Software DevelopmentShubham Joshi

What Do Contribution Guidelines Say About Software Testing? (MSR 2025)Andre Hora

Software testing plays a crucial role in the contribution process of open-source projects. For example, contributions introducing new features are expected to include tests, and contributions with tests are more likely to be accepted. Although most real-world projects require contributors to write tests, the specific testing practices communicated to contributors remain unclear. In this paper, we present an empirical study to understand better how software testing is approached in contribution guidelines. We analyze the guidelines of 200 Python and JavaScript open-source software projects. We find that 78% of the projects include some form of test documentation for contributors. Test documentation is located in multiple sources, including CONTRIBUTING files (58%), external documentation (24%), and README files (8%). Furthermore, test documentation commonly explains how to run tests (83.5%), but less often provides guidance on how to write tests (37%). It frequently covers unit tests (71%), but rarely addresses integration (20.5%) and end-to-end tests (15.5%). Other key testing aspects are also less frequently discussed: test coverage (25.5%) and mocking (9.5%). We conclude by discussing implications and future research.

Salesforce Data Cloud- Hyperscale data platform, built for Salesforce.Dele Amefo

Maxon CINEMA 4D 2025 Crack FREE Download LINKyounisnoman75

⭕️➡️ FOR DOWNLOAD LINK : http://drfiles.net/ ⬅️⭕️ Maxon Cinema 4D 2025 is the latest version of the Maxon's 3D software, released in September 2024, and it builds upon previous versions with new tools for procedural modeling and animation, as well as enhancements to particle, Pyro, and rigid body simulations. CG Channel also mentions that Cinema 4D 2025.2, released in April 2025, focuses on spline tools and unified simulation enhancements. Key improvements and features of Cinema 4D 2025 include: Procedural Modeling: New tools and workflows for creating models procedurally, including fabric weave and constellation generators. Procedural Animation: Field Driver tag for procedural animation. Simulation Enhancements: Improved particle, Pyro, and rigid body simulations. Spline Tools: Enhanced spline tools for motion graphics and animation, including spline modifiers from Rocket Lasso now included for all subscribers. Unified Simulation & Particles: Refined physics-based effects and improved particle systems. Boolean System: Modernized boolean system for precise 3D modeling. Particle Node Modifier: New particle node modifier for creating particle scenes. Learning Panel: Intuitive learning panel for new users. Redshift Integration: Maxon now includes access to the full power of Redshift rendering for all new subscriptions. In essence, Cinema 4D 2025 is a major update that provides artists with more powerful tools and workflows for creating 3D content, particularly in the fields of motion graphics, VFX, and visualization.

How Valletta helped healthcare SaaS to transform QA and compliance to grow wi...Egor Kaleynik

This case study explores how we partnered with a mid-sized U.S. healthcare SaaS provider to help them scale from a successful pilot phase to supporting over 10,000 users—while meeting strict HIPAA compliance requirements. Faced with slow, manual testing cycles, frequent regression bugs, and looming audit risks, their growth was at risk. Their existing QA processes couldn’t keep up with the complexity of real-time biometric data handling, and earlier automation attempts had failed due to unreliable tools and fragmented workflows. We stepped in to deliver a full QA and DevOps transformation. Our team replaced their fragile legacy tests with Testim’s self-healing automation, integrated Postman and OWASP ZAP into Jenkins pipelines for continuous API and security validation, and leveraged AWS Device Farm for real-device, region-specific compliance testing. Custom deployment scripts gave them control over rollouts without relying on heavy CI/CD infrastructure. The result? Test cycle times were reduced from 3 days to just 8 hours, regression bugs dropped by 40%, and they passed their first HIPAA audit without issue—unlocking faster contract signings and enabling them to expand confidently. More than just a technical upgrade, this project embedded compliance into every phase of development, proving that SaaS providers in regulated industries can scale fast and stay secure.

Designing AI-Powered APIs on Azure: Best Practices& ConsiderationsDinusha Kumarasiri

AI is transforming APIs, enabling smarter automation, enhanced decision-making, and seamless integrations. This presentation explores key design principles for AI-infused APIs on Azure, covering performance optimization, security best practices, scalability strategies, and responsible AI governance. Learn how to leverage Azure API Management, machine learning models, and cloud-native architectures to build robust, efficient, and intelligent API solutions

Who Watches the Watchmen (SciFiDevCon 2025)Allon Mureinik

Tests, especially unit tests, are the developers’ superheroes. They allow us to mess around with our code and keep us safe. We often trust them with the safety of our codebase, but how do we know that we should? How do we know that this trust is well-deserved? Enter mutation testing – by intentionally injecting harmful mutations into our code and seeing if they are caught by the tests, we can evaluate the quality of the safety net they provide. By watching the watchmen, we can make sure our tests really protect us, and we aren’t just green-washing our IDEs to a false sense of security. Talk from SciFiDevCon 2025 https://www.scifidevcon.com/courses/2025-scifidevcon/contents/680efa43ae4f5

Interactive odoo dashboards for sales, CRM , Inventory, Invoice, Purchase, Pr...AxisTechnolabs

Interactive Odoo Dashboard for various business needs can provide users with dynamic, visually appealing dashboards tailored to their specific requirements. such a module that could support multiple dashboards for different aspects of a business ✅Visit And Buy Now : https://bit.ly/3VojWza ✅This Interactive Odoo dashboard module allow user to create their own odoo interactive dashboards for various purpose. App download now : Odoo 18 : https://bit.ly/3VojWza Odoo 17 : https://bit.ly/4h9Z47G Odoo 16 : https://bit.ly/3FJTEA4 Odoo 15 : https://bit.ly/3W7tsEB Odoo 14 : https://bit.ly/3BqZDHg Odoo 13 : https://bit.ly/3uNMF2t Try Our website appointment booking odoo app : https://bit.ly/3SvNvgU 👉Want a Demo ?📧 [email protected] ➡️Contact us for Odoo ERP Set up : 091066 49361 👉Explore more apps: https://bit.ly/3oFIOCF 👉Want to know more : 🌐 https://www.axistechnolabs.com/ #odoo #odoo18 #odoo17 #odoo16 #odoo15 #odooapps #dashboards #dashboardsoftware #odooerp #odooimplementation #odoodashboardapp #bestodoodashboard #dashboardapp #odoodashboard #dashboardmodule #interactivedashboard #bestdashboard #dashboard #odootag #odooservices #odoonewfeatures #newappfeatures #odoodashboardapp #dynamicdashboard #odooapp #odooappstore #TopOdooApps #odooapp #odooexperience #odoodevelopment #businessdashboard #allinonedashboard #odooproducts

Not So Common Memory Leaks in Java WebinarTier1 app

This SlideShare presentation is from our May webinar, “Not So Common Memory Leaks & How to Fix Them?”, where we explored lesser-known memory leak patterns in Java applications. Unlike typical leaks, subtle issues such as thread local misuse, inner class references, uncached collections, and misbehaving frameworks often go undetected and gradually degrade performance. This deck provides in-depth insights into identifying these hidden leaks using advanced heap analysis and profiling techniques, along with real-world case studies and practical solutions. Ideal for developers and performance engineers aiming to deepen their understanding of Java memory management and improve application stability.

Top 10 Client Portal Software Solutions for 2025.docxPortli

Requirements in Engineering AI- Enabled Systems: Open Problems and Safe AI Sy...Lionel Briand

Download YouTube By Click 2025 Free Full Activatedsaniamalik72555

Avast Premium Security Crack FREE Latest Version 2025mu394968

🌍📱👉COPY LINK & PASTE ON GOOGLE https://dr-kain-geera.info/👈🌍 Avast Premium Security is a paid subscription service that provides comprehensive online security and privacy protection for multiple devices. It includes features like antivirus, firewall, ransomware protection, and website scanning, all designed to safeguard against a wide range of online threats, according to Avast. Key features of Avast Premium Security: Antivirus: Protects against viruses, malware, and other malicious software, according to Avast. Firewall: Controls network traffic and blocks unauthorized access to your devices, as noted by All About Cookies. Ransomware protection: Helps prevent ransomware attacks, which can encrypt your files and hold them hostage. Website scanning: Checks websites for malicious content before you visit them, according to Avast. Email Guardian: Scans your emails for suspicious attachments and phishing attempts. Multi-device protection: Covers up to 10 devices, including Windows, Mac, Android, and iOS, as stated by 2GO Software. Privacy features: Helps protect your personal data and online privacy. In essence, Avast Premium Security provides a robust suite of tools to keep your devices and online activity safe and secure, according to Avast.

The Significance of Hardware in Information Systems.pdfdrewplanas10

Mastering Fluent Bit: Ultimate Guide to Integrating Telemetry Pipelines with ...Eric D. Schabell

It's time you stopped letting your telemetry data pressure your budgets and get in the way of solving issues with agility! No more I say! Take back control of your telemetry data as we guide you through the open source project Fluent Bit. Learn how to manage your telemetry data from source to destination using the pipeline phases covering collection, parsing, aggregation, transformation, and forwarding from any source to any destination. Buckle up for a fun ride as you learn by exploring how telemetry pipelines work, how to set up your first pipeline, and exploring several common use cases that Fluent Bit helps solve. All this backed by a self-paced, hands-on workshop that attendees can pursue at home after this session (https://o11y-workshops.gitlab.io/workshop-fluentbit).

Adobe Lightroom Classic Crack FREE Latest link 2025kashifyounis067

🌍📱👉COPY LINK & PASTE ON GOOGLE http://drfiles.net/ 👈🌍 Adobe Lightroom Classic is a desktop-based software application for editing and managing digital photos. It focuses on providing users with a powerful and comprehensive set of tools for organizing, editing, and processing their images on their computer. Unlike the newer Lightroom, which is cloud-based, Lightroom Classic stores photos locally on your computer and offers a more traditional workflow for professional photographers. Here's a more detailed breakdown: Key Features and Functions: Organization: Lightroom Classic provides robust tools for organizing your photos, including creating collections, using keywords, flags, and color labels. Editing: It offers a wide range of editing tools for making adjustments to color, tone, and more. Processing: Lightroom Classic can process RAW files, allowing for significant adjustments and fine-tuning of images. Desktop-Focused: The application is designed to be used on a computer, with the original photos stored locally on the hard drive. Non-Destructive Editing: Edits are applied to the original photos in a non-destructive way, meaning the original files remain untouched. Key Differences from Lightroom (Cloud-Based): Storage Location: Lightroom Classic stores photos locally on your computer, while Lightroom stores them in the cloud. Workflow: Lightroom Classic is designed for a desktop workflow, while Lightroom is designed for a cloud-based workflow. Connectivity: Lightroom Classic can be used offline, while Lightroom requires an internet connection to sync and access photos. Organization: Lightroom Classic offers more advanced organization features like Collections and Keywords. Who is it for? Professional Photographers: PCMag notes that Lightroom Classic is a popular choice among professional photographers who need the flexibility and control of a desktop-based application. Users with Large Collections: Those with extensive photo collections may prefer Lightroom Classic's local storage and robust organization features. Users who prefer a traditional workflow: Users who prefer a more traditional desktop workflow, with their original photos stored on their computer, will find Lightroom Classic a good fit.

Microservices on the client side

1. Microservices on the client side Sergey N. Bolshchikov, Team Leader @ Wix linkedin/bolshchikov github.com/bolshchikov@[email protected]

2. Hi. I am Sergey, ❖ team lead @ Wix, ❖ curator of js-must-watch list, ❖ creator of YGLF Conference. Kiev

3. I have a disclaimer to make confession

4. AGENDA Project evolution How it works? When can you apply it?

5. Project evolution 00

6. We start...

7. Angular We start...

8. Angular React We start...

9. Angular React Elm We start...

10. Can you…? Somebody else comes...

11. Can you…? Sure, PR... Somebody else comes...

12. Can you…? Sure, PR... Somebody else comes... WTF?

13. Can you…? Sure, PR... WTF?? Somebody else comes... WTF?

14. Can you…? NO! Screw it Somebody else comes...

15. Can you…? NO! Screw it iframe! Somebody else comes...

16. I need x…? Somebody else comes...

17. I need x…? It will take a... Somebody else comes...

18. I need x…? It will take a... Somebody else comes... post message

19. I need x…? It will take a... fu**ing iframe :( Somebody else comes... post message

20. 8 secs?? We starting to having issues...

21. 8 secs?? We starting to having issues... well, iframes...

22. 8 secs?? fu**ing iframe :( We starting to having issues... well, iframes...

23. let’s SSR! We starting to having limits...

24. let’s SSR! We starting to having limits... well, iframes...

25. let’s SSR! fu**ing iframe :( We starting to having limits... well, iframes...

26. Current solutions & Objective 01

27. 1. Single-page application with lazy-loaded isolated modules

28. 1. Single-page application with lazy-loaded isolated modules

29. 1. Single-page application with lazy-loaded isolated modules

30. 1. Single-page application with lazy-loaded isolated modules

31. 1. Single-page application with lazy-loaded isolated modules 2. Support existing independent react/angular applications

32. 1. Single-page application with lazy-loaded isolated modules 2. Support existing independent react/angular applications

33. 1. Single-page application with lazy-loaded isolated modules 2. Support existing independent react/angular applications

34. 1. Single-page application with lazy-loaded isolated modules 2. Support existing independent react/angular applications

35. 1. Single-page application with lazy-loaded isolated modules 2. Support existing independent react/angular applications

36. render angular inside react application

37. render angular inside react application Angular app React component React component React component what we usually have...

38. So what do we want? What’s the ideal solution?

39. render angular inside react applicationwhat we really want is... React app

40. render angular inside react applicationwhat we really want is... Angular app React app

41. render angular inside react applicationwhat we really want is... Angular app React app Angular app

42. render angular inside react applicationwhat we really want is... Angular app React app Angular app React app

43. Demo time 02

44. Angular app React app Angular app React app

45. https://github.com/bolshchikov-public/react-module-container-example

46. In-depth explanations 03

47. https://github.com/wix/react-module-container

48. 1. Single-page application with lazy-loaded isolated modules 2. Support existing independent react/angular applications

49. Useful for you? 04

50. Thank You linkedin/bolshchikov github.com/bolshchikov@[email protected]

51. Q&A linkedin/bolshchikov github.com/bolshchikov@[email protected]

52. Useful Links 1. https://github.com/wix/react-module-container 2. https://github.com/bolshchikov-public/react-module-container-example 3. Angular Lazy Component 4. React Lazy Component 5. [email protected]

Microservices on the client side

Recommended

More Related Content

More from Sergey Bolshchikov (6)

Recently uploaded (20)

Microservices on the client side