The session will show case how we build our frontend platform with React, Node and Webpack to generate widget components that is sharable across our UI ecosystem as well as third party sites. And the widgets / components that get generated can be run isomorphically across different languages . For example, you can consume our widget service in PHP or Python and able to get the same isomorphic experience.
Building Isomorphic Widget Pla;orm
with React and Webpack
presented by Roy Yu
Explaining how to build widgets with React that
can have SEO value and discuss
This slide contains a lot of graphics.
Viewer discreIon advised.
Retro is a combinaIon
of tools, including
webpack, it is an
internal framework we
created for our team.
• Low Learning Barrier ( unIl you work on more advance stuﬀ )
• Great community support and ecosystem
• Components are composable
Isn’t it widget also meant reusable component ? React is
naIvely a good match of what we need.
• Powerful build tool, module bundler and
• Lots of community support ( unIl you work on more advance
• Lots of assets transformaIon loaders and
We get many features we need out of the box and what we need to do
is to feed webpack an conﬁguraIon ﬁle. The conﬁguraIon model is
somewhere between Grunt and Gulp. But, IMHO, it is way more
powerful than Grunt and Gulp J
Deﬁne a normal high order container and dump components
Index.jsx is our high order container which contains ﬂux data layer
ContestAuthComponents.jsx is what the industry call dump
component, it is a pure view that take props only.
A\er we have the module or the component, we now can wrap the
component individually with a widget wrapper. And client can pass
in conﬁg to bootstrap the widget.
Approach #1 ( con>nue )
to do the following … And ask them to put a “#app-‐container” into
their page J
Instead of having individual wrapper for individual components, we
can design our widget as a set of library.
Approach #2 ( con>nue )
Beaer yet, you can take advantage of lazy loading and also import
EventEmiaer to manage the life cycle of your widgets.
( Client Side )
Now we have develop some widget source code with React. And …
• We need to transform source code, opImize it
• Create ArIfacts and meta data
• Deploy client assets to CDN
But stay tune, we are not done yet, the following pipeline is for client side ONLY.
There are many ways to package and deliver the
widgets to third party, what we have tried :-‐
• S3 / CDN
• Web Component / Open Component
• Public / Private Registry
• Docker Container as Resources / API proxy
• … blah … etc
( Server Side )
So at the end, the template
service could be expose as an
API for diﬀerent language to
A\er they ( like PHP / ruby ) get
the response, they can put the
content into their view.
We are going to demo a client side widget
applicaIon with React and Webpack.
One important thing to note in this demo is the “meta” data ﬁle
And later we will go to Serve side
We are going to demo of Server side isomorphic
• We will show case Template Service as
– Page experience
– API experience
We are going to demo packaging our widget in a
format easy for customer to consume
Web Components / Open Components