4/1/2017

Micro apps across three

continents

About US:Matan.defaultProps = {

Role: “Webapps Team Lead @ eXelate, A Nielsen Company",

Emails: [“matan.av@gmail.com”,“matan.avneri@nielsen.com"

],

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: [“mikxman@gmail.com”,“vlad.mystetskyi@nielsen.com"

],

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!