Micro apps across 3 continents using React js
29
4/1/2017 Micro apps across three continents
-
Upload
ido-shilon -
Category
Engineering
-
view
303 -
download
3
Transcript of Micro apps across 3 continents using React js
4/1/2017
Micro apps across three
continents
About US:Matan.defaultProps = {
Role: “Webapps Team Lead @ eXelate, A Nielsen Company",
Emails: [“[email protected]”,“[email protected]"
],
Team: “NCS App”,
Mobile: “052-2490961”,
Tenure: “3 Years @ eXelate”,
Linkedin: “https://www.linkedin.com/in/matan-avneri-b8bb6164" // or just search}
About US:Vlad.defaultProps = {
Role: “Webapps Team Lead @ eXelate, A Nielsen Company",
Emails: [“[email protected]”,“[email protected]"
],
Team: “Infra”,
Mobile: “058-5422288”,
Tenure: “1.5 Years @ eXelate”,
Linkedin: “https://www.linkedin.com/in/vlad-mystetskyi-b3413941" // or just search}
About exelate:● Founded in 2007
○ New York (~100 employees)
○ Israel (~70 employees)
● Big Data company
● Was acquired by Nielsen in March 2015
● eXelate is building the Nielsen Marketing Cloud
Agenda ● What we needed to build ?
● Why common solutions like webpack didn’t work for us
● What we built
● Shared components - our internal repos with an open source paradigm
● A deeper look into an app
● Existing problems and our plans ahead
Why micro apps and why now ?
6 apps
2000 Nielsen customers 200 eXelate customers
12 developers 40 developers across 3 continents
1 app
What we needed to build ?● Multiple apps with UX of one application
● App - set of screens
● Separate repositories
● Deploy independently
● Technology freedom
● Loading on demand
● Adding apps in runtime without rebuilding
Why common solution like webpack didn’t work for usWebpack is created for bundling modules and not applications.
But webpack is cool and we want to use it!
So, what is the solution?
What did we buildBrowser
App1
Infra
AppN
…….
Loading on demand with require.js (AMD)
● Loaded on startup (index.html)● Shared libraries (React, redux, d3, lodash etc.)● Screen loading on demand
Screen1.jsScreen2.jsScreen3.jsCommons.js
Screen1.jsScreen2.jsCommons.js
● Login/Logout● Shared components● Navigation/routing
Communication between app and infra
window.Infra.require(‘./BaseScreen’)window.Infra.require(‘./Router’)
Base screen interface
Render examples
Render examples
Render examples
Building the appEach app has the following Webpack config:
DEPLOYMENT
S3 bucketwith subfolders
App1: latest.zip
unzipadd cache busting
upload to S3
app1 app2 app3 app4Infra
HTTP API
AWS CloudFront CDN
Deployment service
App1: latest.zip Infra: latest.zip App1: latest.zip App1: latest.zip
Apps recommended stack● React
● Redux
● Less/Sass
● Tape + Enzyme + JSDom
Unified UI/UX - Style guide
Shared Components● React Based
● Internal Open Sourced
● 100% Coverage
● Everyone can contribute!
React StoryBook
How an app is born● Who am I?
How an app is born● How can I use the shared stuff?
How an app is born● Infra Facade
How an app is born● Tests…
How an app is born● Cook Book
● Use shared components
● CI Pipeline
● 1 Day app in Integration Environment
Challenges● Shared Components Contracts
● App CSS Isolation
● App JS Isolation
● Limited to Infra vendors dependencies
Solutions● Versioning Components
● Integration Environment With Multiple Apps
● Build Time Code Analysis
● Development Conventions
We Are Hiring
http://exelate.com/about-us/careers
Our Engineering Blog:
http://engineering.exelate.com/
Thanks!
