SlideShare une entreprise Scribd logo
1  sur  47
Télécharger pour lire hors ligne
Building reusable components as micro frontends  with glimmer js and webcomponents
Building reusable components as micro-
frontends
with GlimmerJS and WebComponents
Andrei Sebastian Cîmpean, @Andrei_Cimpean
Building reusable components as micro frontends  with glimmer js and webcomponents
https://en.wikipedia.org/wiki/Odysseus#/media/File:Arnold_B%C3%B6cklin_-_Odysseus_and_Polyphemus.jpg
Odysseus and the Sirens, Ulixes mosaic at the Bardo National Museum in Tunis, Tunisia, 2nd century AD
Odysseus' ship passing between the six-headed monster Scylla and the whirlpool Charybdis, from a fresco by Alessandro Allori (1535–1607)
“Improve reusability to accelerate development”
THE MISSION
=> Very clear
architecture
requirements
Reusability
Extensibility
Flexibility
Maintainability
Vaadin/Java
.net
Js Framework
Angular, Ember
The simplified CCC tech
Backbone + React
Server Application
Java
Server Application
Java
Rich Frontend Backend
A common evolving tech stack of successful frontend apps
BackboneJS
Models
Views
Router
Sync (api communication)
BackboneJS
Models
Views
Router
Sync (api communication)
ReactJS
View layer for new features
Components
BackboneJS
Models
Views
Router
Sync (api communication)
ReactJS
View layer for new features
Components
Redux
State container
Used for new features
Today
201
2
Reusability
Horizontal reuse
➔ assets that tend to be utilities that are
generic to multiple applications (library)
Vertical reuse
➔ assets that are typically business
services, data services, business rules,
etc.
https://artofsoftwarereuse.com/2009/10/13/key-
differences-between-vertical-and-horizontal-reuse/
https://artofsoftwarereuse.com/2009/04/02/horizontal-
and-vertical-software-assets/
Characteristic Vertical Reuse Horizontal Reuse
Applicability Applications within a
specific domain or closely
related domains
Applicable across the board
for application regardless of
domain
Stakeholders Business stakeholders and
technology
Primarily technology. In
some cases support teams
provide input.
Variability Varies from well-defined to
open ended depending on
the complexity of the
domain.
Variations may not be
accurately captured in
reusable assets.
More well defined than
open-ended.
https://artofsoftwarereuse.com/2009/10/13/key-differences-between-vertical-and-horizontal-reuse/
Horizontal reuse
via “core” library
is common
A core library can contain:
● Reusable presentation components (
inputs with labels, tables, application
menu, etc.) with styling
● Mixins
● Templates
● jQuery extensions
● Base classes meant for extension
● Reusable functionality (log in, tracking,
event bus, etc.)
● ...
Application Application
Core library
Horizontal reuse
via “core” library
is common
A core library:
● Leads to unpredictable results because
it provides mostly reusable parts that
would be integrated as it makes sense
to each application
● Doesn’t enforce consistency
● Versioning, if attempted, is not trivial
● Limits tech stack choices
Application Application
Core library
A “core” library that only works with some of our current-gen apps, it was extracted some time ago to
help reduce the number of features reimplemented for each application.
Backbone
React
Backbone
React
Core
Vaadin/Java
.net
Js Framework
Angular, Ember
Reusable “core” lib is tricky when you have a large number of successful applications
First go at
Reusable components
Application specific are container
components that implement business
requirements using presentation
components. These are unique per
application and can be considered not
portable.
Business Component are extracted
from existing application specific
components and are, to a degree,
portable between applications.
Toolkit Components are immediately
available in any application.
Common ways of building web apps in our industry
Single Page Application
[Frontend Team]
Server Application
[Backend / Devops Team]
Single Page Application
[Frontend Team]
Aggregation Layer
[BFF, GraphQL]
Service
[Backend /
Devops]
Service
[Backend /
Devops]
Frontend
Team
Backend
Team
Devops
Team
TeamFeature
[Specificmission]
TeamFeature
[Specificmission]
TeamFeature
[Specificmission]
API + RICH CLIENT SOA + RICH CLIENT FEATURE TEAMS
USING
MICRO-FRONTENDS
Reusing JS, HTML and CSS
independent of tech stack
WebComponents
Standard with strict boundaries that
works with any tech stack.
En ensemble of open web
technologies that permit the creation
of reusable user interface widgets.
https://www.webcomponents.org/specs
Backbone
React
Backbone
React
WebComponent
Vaadin/Java
.net
Js Framework
Angular, Ember
The WebComponents standard
Web components are based on four main specifications:
1. Custom Elements
○ The Custom Elements specification lays the foundation for designing and using new types
of DOM elements.
2. Shadow DOM
○ The shadow DOM specification defines how to use encapsulated style and markup in web
components.
3. HTML imports
○ The HTML imports specification defines the inclusion and reuse of HTML documents in
other HTML documents.
4. HTML Template
○ The HTML template element specification defines how to declare fragments of markup
that go unused at page load, but can be instantiated later on at runtime.
The WebComponents standard is plagued with problems
Polymer is moving to Javascript modules because the current HTML Import
spec is dead
Chrome implemented features eagerly but most browsers don’t agree on the
implementation specifications
● Chrome 36+/Opera 20+ implemented a previous version of Custom
Elements (v0) that used .registerElement(). Other browsers are
implementing v1, window.customElements.define().
● Shadow DOM is considered for implementation by IE team
● HTML Templates are the best supported but they are a lot slower than
framework specific templates (handlebars, react code)
GlimmerJS
Glimmer.js is an open source
JavaScript library for building UI
components for the web.
It is built on the same rendering
engine as Ember.js. It’s a UI layer—
no routing, data loading, or other
features.
Glimmer components can be
booted up as Web Components.
https://glimmerjs.com/
https://engineering.linkedin.com/blog/2017/12/the-
glimmer-binary-experience
Glimmer was created primarily as a tool for building mobile Progressive Web
Applications and the exporter was an extra feature enabled by the small size.
The community is still discussing the strategy for delivering web components
[1]. However, the current implementation is sufficient for our goal of authoring
sharable components between different tech stacks.
1. https://github.com/glimmerjs/glimmer-web-component/issues/19
Ember-CLI
➔ It’s a command line utility that
provides an asset pipeline, a
strong conventional project
structure, and a powerful
addon system for extension
➔ It ships with support for
blueprints. Blueprints are
snippet generators for entities
and it’s trivial to create custom
ones
https://ember-cli.com/
In the future*: npm install our way to Ember
*No date, but an important target of the community and in progress
https://github.com/emberjs/ember.js/issues/16301
WebComponents
With GlimmerJS
Glimmer doesn’t produce web
components based on standards
in draft, it’s simply replacing a
custom element with appropriate
HTML generated by the Glimmer
library.
In the future, we can use
Glimmer components in Ember
without having to compile them
as WebComponents first.
Backbone
React
Backbone
React
GlimmerJS Applications
as WebComponent
Vaadin/Java
.net
Js Framework
Angular
EmberJS
Potentially use
without wrapping as
WebComponent
Integration into
web apps
1. Render and forget
2. Events and properties
3. Redux
4. EventBus
We follow selectively the Google best practices for working with web components
We follow events 100%:
1. Dispatch events in response to internal component activity.
2. Do not dispatch events in response to the host setting a property
(downward data flow).
We ignore recommendations for shadow DOM and styling.
We selectively follow recommendations for Attributes and properties.
[1] https://developers.google.com/web/fundamentals/architecture/building-components/best-practices
PlaylistViewer
Component
Sub-ComponentSub-Component
Sub-ComponentSub-Component
Configuration:
Uploader for API request
Things to consider:
● Auth works out of the box if you
use cookies
● Need to provide loading states
and error states
● HTTP caching
● Need strategy for layout styling
Google recommends[1] that developers should aim to keep primitive data attributes and
properties in sync, reflecting from property to attribute, and vice versa.
We don’t support this at the moment and don’t intend to:
● Partially because it’s complex to implement
● Partially because of a Glimmer limitation
It’s a tradeoff that works because we’re using web components as application parts that
receive read-only configuration from parent and have internal state.
[1] https://developers.google.com/web/fundamentals/architecture/building-components/best-practices
Important GlimmerJS limitations and mitigations
Can’t pass HTML attributes to the web
component
https://github.com/glimmerjs/glimmer-web-
component/issues/19
Because Glimmer replaces the custom
element with HTML it manages.
We’re using a simple workaround.
Incomplete support for writing component tests Big problem. We’re biting the bullet.
Very small ecosystem Surprisingly small problem because we’re
building small application parts.
Glimmer components are not 100% supported
in Ember
Working with complex data
Application
Components
Sub-ComponentSub-Component
Sub-ComponentSub-Component
Host Redux
Store
Internally we use the “Data Down,
Action Up” principle.
We accept rich data (objects,
arrays) through method calls or
properties using the DOM and we
don’t reflect them.
Redux is not our default option but
we support hot-swapping the
internal store with one supplied by
the host application.
External EventConfiguration
“External events” are CustomEvents.
In this case, the webcomponent would send a complex object describing the option
the user selected.
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
We use a React.Component
wrapper that:
● Sets configuration as HTML
attributes
● Listens to CustomEvents
dispatched by the
webcomponent and maybe
maps them to callbacks
● Controls re-rendering
Strategy for communication
with the backend service
It’s a proxy between services
and a specific device.
It is tightly coupled to a
specific user experience and
is typically maintained by the
same team as the user
interface.
https://samnewman.io/patterns/archit
ectural/bff/
Backend For
Frontend
iOS Mobile
Client
Desktop
Client
Desktop
Client
BFF
Mobile
Client
BFF
Micro-frontends
WebComponents + BFF
Logical architecture
ccc-application-[ver] reusable-comp-[ver] comp-service-[ver] Service-2
Service-1
Service-3
Invoke
Launch &
Configure Invoke
Maybe almost Micro-frontends
“In this approach, the web application is broken down into its features, and
each feature is owned, frontend to backend, by a different team. This ensures
that every feature is developed, tested and deployed independently from other
features.
Multiple techniques exist to recombine the features — sometimes as pages,
sometimes as components — into a cohesive user experience.”
Thoughtworks tags this as Trial https://www.thoughtworks.com/radar/techniques/micro-frontends
Opportunities
● Glimmer can bundle multiple
WebComponents in the same file
● Serverless computing / FASS
● Full-stack development of
application parts
● ...
Showcase?
Using https://github.com/puikinsh/sufee-admin-dashboard
Building reusable components as micro frontends  with glimmer js and webcomponents
In regards to
styling
➔ Application Suites have a
consistent look & feel
➔ Micro-frontends can very easily
have noticeably different look
and feel
➔ Most developers hate CSS
➔ We decided to implement a
styleguide put together by
designers as a SASS library
Styleguide
implementation
We created an ember-cli addon and
custom blueprint to standardize the
creation of style files.
We want to bundle the built css
style file with the sass source code
because we expect users to pipe
what they use through a build
process.
We don’t have a clear strategy at the moment
beyond horizontal reuse (theming, integration,
layout strictness, etc).
Style Guide
● We’re applying BEMIT
○ Inverted Triangle CSS architecture. BEM + ITCSS = BEMIT
○ Small additions to BEM for usage and state information ( namespaces, responsive
prefixes )
● We expect that application developers will import placeholders when
they reference a specific sass file, not the classname
SASS Placeholder
%ccc-input
Class
.ccc-input@extends
Theme
Sass lists
Object
o-
Component
c-
Utility
u-
Theme
t-
Scope
t- ..
.
use
Putting everything together
reusable-styles reusable-styles-[ver]
microfrontend microfrontend-[ver]
feature-interface feature-interface-[ver]
feature-service feature-service-[ver]
application application-[ver]
Github Artifactory EC2
feature-service-[ver]
build
build
build
build
build
application-[ver]
deploy
deploy
optional
Npm
dependency
Questions?
Building reusable components as micro frontends  with glimmer js and webcomponents

Contenu connexe

Tendances

.NET MAUI with .NET 6 (December 2021, Preview 10)
.NET MAUI with .NET 6 (December 2021, Preview 10).NET MAUI with .NET 6 (December 2021, Preview 10)
.NET MAUI with .NET 6 (December 2021, Preview 10)Alex Pshul
 
AWS API Framework Overview
AWS API Framework OverviewAWS API Framework Overview
AWS API Framework OverviewAPI Talent
 
Platform as a Service for Rapid Development
Platform as a Service for Rapid DevelopmentPlatform as a Service for Rapid Development
Platform as a Service for Rapid DevelopmentPuja Pramudya
 
Continuous Automated Deployment with Apache ACE
Continuous Automated Deployment with Apache ACEContinuous Automated Deployment with Apache ACE
Continuous Automated Deployment with Apache ACEJan Willem Janssen
 
ASP.NET Core deployment options
ASP.NET Core deployment optionsASP.NET Core deployment options
ASP.NET Core deployment optionsKen Cenerelli
 
Tomasz Janczuk - Webtaskalifragilistexpialidocious
Tomasz Janczuk - WebtaskalifragilistexpialidociousTomasz Janczuk - Webtaskalifragilistexpialidocious
Tomasz Janczuk - WebtaskalifragilistexpialidociousServerlessConf
 
Nils Rhode - Does it always have to be k8s - TeC Day 2019
Nils Rhode - Does it always have to be k8s - TeC Day 2019Nils Rhode - Does it always have to be k8s - TeC Day 2019
Nils Rhode - Does it always have to be k8s - TeC Day 2019Haufe-Lexware GmbH & Co KG
 
Chris Anderson and Yochay Kiriaty - Serverless Patterns with Azure Functions
Chris Anderson and Yochay Kiriaty - Serverless Patterns with Azure FunctionsChris Anderson and Yochay Kiriaty - Serverless Patterns with Azure Functions
Chris Anderson and Yochay Kiriaty - Serverless Patterns with Azure FunctionsServerlessConf
 
Integrating Apache Syncope with Apache CXF
Integrating Apache Syncope with Apache CXFIntegrating Apache Syncope with Apache CXF
Integrating Apache Syncope with Apache CXFcoheigea
 
Building a Google Cloud Firestore API with dotnet core
Building a Google Cloud Firestore API with dotnet coreBuilding a Google Cloud Firestore API with dotnet core
Building a Google Cloud Firestore API with dotnet coreMike Melusky
 
Serverless Architecture
Serverless ArchitectureServerless Architecture
Serverless ArchitectureLena Barinova
 
Que hay de nuevo en Visual Studio 2013 y ASP.NET 5.1
Que hay de nuevo en Visual Studio 2013 y ASP.NET 5.1Que hay de nuevo en Visual Studio 2013 y ASP.NET 5.1
Que hay de nuevo en Visual Studio 2013 y ASP.NET 5.1Rodolfo Finochietti
 
Container Orchestration for .NET Developers
Container Orchestration for .NET DevelopersContainer Orchestration for .NET Developers
Container Orchestration for .NET DevelopersMike Melusky
 
Effective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and DapperEffective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and DapperMike Melusky
 

Tendances (20)

.NET MAUI with .NET 6 (December 2021, Preview 10)
.NET MAUI with .NET 6 (December 2021, Preview 10).NET MAUI with .NET 6 (December 2021, Preview 10)
.NET MAUI with .NET 6 (December 2021, Preview 10)
 
AWS API Framework Overview
AWS API Framework OverviewAWS API Framework Overview
AWS API Framework Overview
 
Platform as a Service for Rapid Development
Platform as a Service for Rapid DevelopmentPlatform as a Service for Rapid Development
Platform as a Service for Rapid Development
 
Continuous Automated Deployment with Apache ACE
Continuous Automated Deployment with Apache ACEContinuous Automated Deployment with Apache ACE
Continuous Automated Deployment with Apache ACE
 
ASP.NET Core deployment options
ASP.NET Core deployment optionsASP.NET Core deployment options
ASP.NET Core deployment options
 
Tomasz Janczuk - Webtaskalifragilistexpialidocious
Tomasz Janczuk - WebtaskalifragilistexpialidociousTomasz Janczuk - Webtaskalifragilistexpialidocious
Tomasz Janczuk - Webtaskalifragilistexpialidocious
 
Nils Rhode - Does it always have to be k8s - TeC Day 2019
Nils Rhode - Does it always have to be k8s - TeC Day 2019Nils Rhode - Does it always have to be k8s - TeC Day 2019
Nils Rhode - Does it always have to be k8s - TeC Day 2019
 
Chris Anderson and Yochay Kiriaty - Serverless Patterns with Azure Functions
Chris Anderson and Yochay Kiriaty - Serverless Patterns with Azure FunctionsChris Anderson and Yochay Kiriaty - Serverless Patterns with Azure Functions
Chris Anderson and Yochay Kiriaty - Serverless Patterns with Azure Functions
 
Integrating Apache Syncope with Apache CXF
Integrating Apache Syncope with Apache CXFIntegrating Apache Syncope with Apache CXF
Integrating Apache Syncope with Apache CXF
 
ASP.NET vNext
ASP.NET vNextASP.NET vNext
ASP.NET vNext
 
.Net Core
.Net Core.Net Core
.Net Core
 
Serverless in action
Serverless in actionServerless in action
Serverless in action
 
Moving ASP.NET MVC to ASP.NET Core
Moving ASP.NET MVC to ASP.NET Core Moving ASP.NET MVC to ASP.NET Core
Moving ASP.NET MVC to ASP.NET Core
 
Building a Google Cloud Firestore API with dotnet core
Building a Google Cloud Firestore API with dotnet coreBuilding a Google Cloud Firestore API with dotnet core
Building a Google Cloud Firestore API with dotnet core
 
Serverless Architecture
Serverless ArchitectureServerless Architecture
Serverless Architecture
 
Que hay de nuevo en Visual Studio 2013 y ASP.NET 5.1
Que hay de nuevo en Visual Studio 2013 y ASP.NET 5.1Que hay de nuevo en Visual Studio 2013 y ASP.NET 5.1
Que hay de nuevo en Visual Studio 2013 y ASP.NET 5.1
 
Container Orchestration for .NET Developers
Container Orchestration for .NET DevelopersContainer Orchestration for .NET Developers
Container Orchestration for .NET Developers
 
Effective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and DapperEffective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and Dapper
 
ASP.NET 5
ASP.NET 5ASP.NET 5
ASP.NET 5
 
Azure Functions
Azure FunctionsAzure Functions
Azure Functions
 

Similaire à Building reusable components as micro frontends with glimmer js and webcomponents

JEE Conf 2015: Less JS!
JEE Conf 2015: Less JS!JEE Conf 2015: Less JS!
JEE Conf 2015: Less JS!_Dewy_
 
MyMobileWeb Certification Part I
MyMobileWeb Certification Part IMyMobileWeb Certification Part I
MyMobileWeb Certification Part Icrdlc
 
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai..."Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...Fwdays
 
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js SimplifiedSunil Yadav
 
Leveraging the Power of Custom Elements in Gutenberg
Leveraging the Power of Custom Elements in GutenbergLeveraging the Power of Custom Elements in Gutenberg
Leveraging the Power of Custom Elements in GutenbergFelix Arntz
 
9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To Choose9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To ChooseAlbiorix Technology
 
IRJET- Polymer Javascript
IRJET- Polymer JavascriptIRJET- Polymer Javascript
IRJET- Polymer JavascriptIRJET Journal
 
Comparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAsComparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAsJennifer Estrada
 
Web components are the future of the web - Take advantage of new web technolo...
Web components are the future of the web - Take advantage of new web technolo...Web components are the future of the web - Take advantage of new web technolo...
Web components are the future of the web - Take advantage of new web technolo...Marios Fakiolas
 
Chrome & Webkit overview
Chrome & Webkit overviewChrome & Webkit overview
Chrome & Webkit overviewBin Chen
 
JSFoo-2017 Takeaways
JSFoo-2017 TakeawaysJSFoo-2017 Takeaways
JSFoo-2017 TakeawaysMir Ali
 
What's new in Portal and WCM 8.5
What's new in Portal and WCM 8.5What's new in Portal and WCM 8.5
What's new in Portal and WCM 8.5Vinayak Tavargeri
 
Simple Open Source Java Cloud App Stack with Guice, Hibernate, Jersey and Vaadin
Simple Open Source Java Cloud App Stack with Guice, Hibernate, Jersey and VaadinSimple Open Source Java Cloud App Stack with Guice, Hibernate, Jersey and Vaadin
Simple Open Source Java Cloud App Stack with Guice, Hibernate, Jersey and VaadinJian Wu
 

Similaire à Building reusable components as micro frontends with glimmer js and webcomponents (20)

Js frameworks
Js frameworksJs frameworks
Js frameworks
 
JEE Conf 2015: Less JS!
JEE Conf 2015: Less JS!JEE Conf 2015: Less JS!
JEE Conf 2015: Less JS!
 
MyMobileWeb Certification Part I
MyMobileWeb Certification Part IMyMobileWeb Certification Part I
MyMobileWeb Certification Part I
 
Web components api + Vuejs
Web components api + VuejsWeb components api + Vuejs
Web components api + Vuejs
 
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai..."Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
 
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js Simplified
 
Web summit.pptx
Web summit.pptxWeb summit.pptx
Web summit.pptx
 
Leveraging the Power of Custom Elements in Gutenberg
Leveraging the Power of Custom Elements in GutenbergLeveraging the Power of Custom Elements in Gutenberg
Leveraging the Power of Custom Elements in Gutenberg
 
Javascript frameworks
Javascript frameworksJavascript frameworks
Javascript frameworks
 
9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To Choose9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To Choose
 
Top java script frameworks ppt
Top java script frameworks pptTop java script frameworks ppt
Top java script frameworks ppt
 
Reactjs Basics
Reactjs BasicsReactjs Basics
Reactjs Basics
 
IRJET- Polymer Javascript
IRJET- Polymer JavascriptIRJET- Polymer Javascript
IRJET- Polymer Javascript
 
Comparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAsComparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAs
 
Web components are the future of the web - Take advantage of new web technolo...
Web components are the future of the web - Take advantage of new web technolo...Web components are the future of the web - Take advantage of new web technolo...
Web components are the future of the web - Take advantage of new web technolo...
 
Chrome & Webkit overview
Chrome & Webkit overviewChrome & Webkit overview
Chrome & Webkit overview
 
JSFoo-2017 Takeaways
JSFoo-2017 TakeawaysJSFoo-2017 Takeaways
JSFoo-2017 Takeaways
 
Reactjs
ReactjsReactjs
Reactjs
 
What's new in Portal and WCM 8.5
What's new in Portal and WCM 8.5What's new in Portal and WCM 8.5
What's new in Portal and WCM 8.5
 
Simple Open Source Java Cloud App Stack with Guice, Hibernate, Jersey and Vaadin
Simple Open Source Java Cloud App Stack with Guice, Hibernate, Jersey and VaadinSimple Open Source Java Cloud App Stack with Guice, Hibernate, Jersey and Vaadin
Simple Open Source Java Cloud App Stack with Guice, Hibernate, Jersey and Vaadin
 

Dernier

OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorShane Coughlan
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeNeo4j
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfTobias Schneck
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesSoftwareMill
 
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageSales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageDista
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionsNirav Modi
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntelliSource Technologies
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyRaymond Okyere-Forson
 
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsYour Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsJaydeep Chhasatia
 
Streamlining Your Application Builds with Cloud Native Buildpacks
Streamlining Your Application Builds  with Cloud Native BuildpacksStreamlining Your Application Builds  with Cloud Native Buildpacks
Streamlining Your Application Builds with Cloud Native BuildpacksVish Abrams
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLAlluxio, Inc.
 
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.Sharon Liu
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilVICTOR MAESTRE RAMIREZ
 
Enterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze IncEnterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze Incrobinwilliams8624
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...OnePlan Solutions
 
Fields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxFields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxJoão Esperancinha
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Jaydeep Chhasatia
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesShyamsundar Das
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptkinjal48
 

Dernier (20)

OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS Calculator
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG time
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retries
 
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageSales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in Trivandrum
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspections
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptx
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human Beauty
 
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsYour Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
 
Streamlining Your Application Builds with Cloud Native Buildpacks
Streamlining Your Application Builds  with Cloud Native BuildpacksStreamlining Your Application Builds  with Cloud Native Buildpacks
Streamlining Your Application Builds with Cloud Native Buildpacks
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
 
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-Council
 
Enterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze IncEnterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze Inc
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
 
Fields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxFields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptx
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security Challenges
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.ppt
 

Building reusable components as micro frontends with glimmer js and webcomponents

  • 2. Building reusable components as micro- frontends with GlimmerJS and WebComponents Andrei Sebastian Cîmpean, @Andrei_Cimpean
  • 4. https://en.wikipedia.org/wiki/Odysseus#/media/File:Arnold_B%C3%B6cklin_-_Odysseus_and_Polyphemus.jpg Odysseus and the Sirens, Ulixes mosaic at the Bardo National Museum in Tunis, Tunisia, 2nd century AD Odysseus' ship passing between the six-headed monster Scylla and the whirlpool Charybdis, from a fresco by Alessandro Allori (1535–1607)
  • 5. “Improve reusability to accelerate development” THE MISSION
  • 7. Vaadin/Java .net Js Framework Angular, Ember The simplified CCC tech Backbone + React Server Application Java Server Application Java Rich Frontend Backend
  • 8. A common evolving tech stack of successful frontend apps BackboneJS Models Views Router Sync (api communication) BackboneJS Models Views Router Sync (api communication) ReactJS View layer for new features Components BackboneJS Models Views Router Sync (api communication) ReactJS View layer for new features Components Redux State container Used for new features Today 201 2
  • 9. Reusability Horizontal reuse ➔ assets that tend to be utilities that are generic to multiple applications (library) Vertical reuse ➔ assets that are typically business services, data services, business rules, etc. https://artofsoftwarereuse.com/2009/10/13/key- differences-between-vertical-and-horizontal-reuse/ https://artofsoftwarereuse.com/2009/04/02/horizontal- and-vertical-software-assets/
  • 10. Characteristic Vertical Reuse Horizontal Reuse Applicability Applications within a specific domain or closely related domains Applicable across the board for application regardless of domain Stakeholders Business stakeholders and technology Primarily technology. In some cases support teams provide input. Variability Varies from well-defined to open ended depending on the complexity of the domain. Variations may not be accurately captured in reusable assets. More well defined than open-ended. https://artofsoftwarereuse.com/2009/10/13/key-differences-between-vertical-and-horizontal-reuse/
  • 11. Horizontal reuse via “core” library is common A core library can contain: ● Reusable presentation components ( inputs with labels, tables, application menu, etc.) with styling ● Mixins ● Templates ● jQuery extensions ● Base classes meant for extension ● Reusable functionality (log in, tracking, event bus, etc.) ● ... Application Application Core library
  • 12. Horizontal reuse via “core” library is common A core library: ● Leads to unpredictable results because it provides mostly reusable parts that would be integrated as it makes sense to each application ● Doesn’t enforce consistency ● Versioning, if attempted, is not trivial ● Limits tech stack choices Application Application Core library
  • 13. A “core” library that only works with some of our current-gen apps, it was extracted some time ago to help reduce the number of features reimplemented for each application. Backbone React Backbone React Core Vaadin/Java .net Js Framework Angular, Ember Reusable “core” lib is tricky when you have a large number of successful applications
  • 14. First go at Reusable components Application specific are container components that implement business requirements using presentation components. These are unique per application and can be considered not portable. Business Component are extracted from existing application specific components and are, to a degree, portable between applications. Toolkit Components are immediately available in any application.
  • 15. Common ways of building web apps in our industry Single Page Application [Frontend Team] Server Application [Backend / Devops Team] Single Page Application [Frontend Team] Aggregation Layer [BFF, GraphQL] Service [Backend / Devops] Service [Backend / Devops] Frontend Team Backend Team Devops Team TeamFeature [Specificmission] TeamFeature [Specificmission] TeamFeature [Specificmission] API + RICH CLIENT SOA + RICH CLIENT FEATURE TEAMS USING MICRO-FRONTENDS
  • 16. Reusing JS, HTML and CSS independent of tech stack
  • 17. WebComponents Standard with strict boundaries that works with any tech stack. En ensemble of open web technologies that permit the creation of reusable user interface widgets. https://www.webcomponents.org/specs Backbone React Backbone React WebComponent Vaadin/Java .net Js Framework Angular, Ember
  • 18. The WebComponents standard Web components are based on four main specifications: 1. Custom Elements ○ The Custom Elements specification lays the foundation for designing and using new types of DOM elements. 2. Shadow DOM ○ The shadow DOM specification defines how to use encapsulated style and markup in web components. 3. HTML imports ○ The HTML imports specification defines the inclusion and reuse of HTML documents in other HTML documents. 4. HTML Template ○ The HTML template element specification defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.
  • 19. The WebComponents standard is plagued with problems Polymer is moving to Javascript modules because the current HTML Import spec is dead Chrome implemented features eagerly but most browsers don’t agree on the implementation specifications ● Chrome 36+/Opera 20+ implemented a previous version of Custom Elements (v0) that used .registerElement(). Other browsers are implementing v1, window.customElements.define(). ● Shadow DOM is considered for implementation by IE team ● HTML Templates are the best supported but they are a lot slower than framework specific templates (handlebars, react code)
  • 20. GlimmerJS Glimmer.js is an open source JavaScript library for building UI components for the web. It is built on the same rendering engine as Ember.js. It’s a UI layer— no routing, data loading, or other features. Glimmer components can be booted up as Web Components. https://glimmerjs.com/ https://engineering.linkedin.com/blog/2017/12/the- glimmer-binary-experience
  • 21. Glimmer was created primarily as a tool for building mobile Progressive Web Applications and the exporter was an extra feature enabled by the small size. The community is still discussing the strategy for delivering web components [1]. However, the current implementation is sufficient for our goal of authoring sharable components between different tech stacks. 1. https://github.com/glimmerjs/glimmer-web-component/issues/19
  • 22. Ember-CLI ➔ It’s a command line utility that provides an asset pipeline, a strong conventional project structure, and a powerful addon system for extension ➔ It ships with support for blueprints. Blueprints are snippet generators for entities and it’s trivial to create custom ones https://ember-cli.com/
  • 23. In the future*: npm install our way to Ember *No date, but an important target of the community and in progress https://github.com/emberjs/ember.js/issues/16301
  • 24. WebComponents With GlimmerJS Glimmer doesn’t produce web components based on standards in draft, it’s simply replacing a custom element with appropriate HTML generated by the Glimmer library. In the future, we can use Glimmer components in Ember without having to compile them as WebComponents first. Backbone React Backbone React GlimmerJS Applications as WebComponent Vaadin/Java .net Js Framework Angular EmberJS Potentially use without wrapping as WebComponent
  • 25. Integration into web apps 1. Render and forget 2. Events and properties 3. Redux 4. EventBus
  • 26. We follow selectively the Google best practices for working with web components We follow events 100%: 1. Dispatch events in response to internal component activity. 2. Do not dispatch events in response to the host setting a property (downward data flow). We ignore recommendations for shadow DOM and styling. We selectively follow recommendations for Attributes and properties. [1] https://developers.google.com/web/fundamentals/architecture/building-components/best-practices
  • 27. PlaylistViewer Component Sub-ComponentSub-Component Sub-ComponentSub-Component Configuration: Uploader for API request Things to consider: ● Auth works out of the box if you use cookies ● Need to provide loading states and error states ● HTTP caching ● Need strategy for layout styling
  • 28. Google recommends[1] that developers should aim to keep primitive data attributes and properties in sync, reflecting from property to attribute, and vice versa. We don’t support this at the moment and don’t intend to: ● Partially because it’s complex to implement ● Partially because of a Glimmer limitation It’s a tradeoff that works because we’re using web components as application parts that receive read-only configuration from parent and have internal state. [1] https://developers.google.com/web/fundamentals/architecture/building-components/best-practices
  • 29. Important GlimmerJS limitations and mitigations Can’t pass HTML attributes to the web component https://github.com/glimmerjs/glimmer-web- component/issues/19 Because Glimmer replaces the custom element with HTML it manages. We’re using a simple workaround. Incomplete support for writing component tests Big problem. We’re biting the bullet. Very small ecosystem Surprisingly small problem because we’re building small application parts. Glimmer components are not 100% supported in Ember
  • 30. Working with complex data Application Components Sub-ComponentSub-Component Sub-ComponentSub-Component Host Redux Store Internally we use the “Data Down, Action Up” principle. We accept rich data (objects, arrays) through method calls or properties using the DOM and we don’t reflect them. Redux is not our default option but we support hot-swapping the internal store with one supplied by the host application. External EventConfiguration
  • 31. “External events” are CustomEvents. In this case, the webcomponent would send a complex object describing the option the user selected. https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
  • 32. We use a React.Component wrapper that: ● Sets configuration as HTML attributes ● Listens to CustomEvents dispatched by the webcomponent and maybe maps them to callbacks ● Controls re-rendering
  • 33. Strategy for communication with the backend service
  • 34. It’s a proxy between services and a specific device. It is tightly coupled to a specific user experience and is typically maintained by the same team as the user interface. https://samnewman.io/patterns/archit ectural/bff/ Backend For Frontend iOS Mobile Client Desktop Client Desktop Client BFF Mobile Client BFF
  • 36. Logical architecture ccc-application-[ver] reusable-comp-[ver] comp-service-[ver] Service-2 Service-1 Service-3 Invoke Launch & Configure Invoke
  • 37. Maybe almost Micro-frontends “In this approach, the web application is broken down into its features, and each feature is owned, frontend to backend, by a different team. This ensures that every feature is developed, tested and deployed independently from other features. Multiple techniques exist to recombine the features — sometimes as pages, sometimes as components — into a cohesive user experience.” Thoughtworks tags this as Trial https://www.thoughtworks.com/radar/techniques/micro-frontends
  • 38. Opportunities ● Glimmer can bundle multiple WebComponents in the same file ● Serverless computing / FASS ● Full-stack development of application parts ● ...
  • 41. In regards to styling ➔ Application Suites have a consistent look & feel ➔ Micro-frontends can very easily have noticeably different look and feel ➔ Most developers hate CSS ➔ We decided to implement a styleguide put together by designers as a SASS library
  • 42. Styleguide implementation We created an ember-cli addon and custom blueprint to standardize the creation of style files. We want to bundle the built css style file with the sass source code because we expect users to pipe what they use through a build process. We don’t have a clear strategy at the moment beyond horizontal reuse (theming, integration, layout strictness, etc).
  • 43. Style Guide ● We’re applying BEMIT ○ Inverted Triangle CSS architecture. BEM + ITCSS = BEMIT ○ Small additions to BEM for usage and state information ( namespaces, responsive prefixes ) ● We expect that application developers will import placeholders when they reference a specific sass file, not the classname SASS Placeholder %ccc-input Class .ccc-input@extends Theme Sass lists Object o- Component c- Utility u- Theme t- Scope t- .. . use
  • 45. reusable-styles reusable-styles-[ver] microfrontend microfrontend-[ver] feature-interface feature-interface-[ver] feature-service feature-service-[ver] application application-[ver] Github Artifactory EC2 feature-service-[ver] build build build build build application-[ver] deploy deploy optional Npm dependency

Notes de l'éditeur

  1. Additive & in sync with the industry Brownfield success story
  2. To achieve reusability in this context, a better understanding is required. The more services are independent from one the more reuse and composition will be possible with those services. vertical software assets are deliberately constructed as part of a product line. Vertical reuse helps you create new products faster, offer product variations/flavors, and fetch a higher return on your software investments over super-generic horizontal assets.
  3. If this was compared to definitions of vertical and horizontal reuse it could be described as a unplanned combination of both
  4. If this was compared to definitions of vertical and horizontal reuse it could be described as a unplanned combination of both
  5. Focus and intent is to find software assets that are reusable across most or all your applications. Finding assets that are universally reusable is not only difficult but also will make your design overly complex.
  6. But HTML Imports have not gotten traction among the standards committees or other browsers. There are active discussions on a successor, but any new standard would be years away. https://hacks.mozilla.org/2015/06/the-state-of-web-components/
  7. It’s similar to Preact/React but compiles an application’s HTML templates into compact bytecode instead of building a Virtual DOM.
  8. CustomElements can’t be self-closing https://developers.google.com/web/fundamentals/getting-started/primers/customelements https://html.spec.whatwg.org/multipage/syntax.html#void-elements
  9. GRAPHQL is an alternative
  10. Artifact interactions