eBay / arc

arc uses “flags” and a file naming convention to generate and serve a bundle that contains only the resources used by the requesting environment. This allows building web applications that serve only the code necessary for multiple device types, locales, brands - all from a single codebase.

The flexibility of arc enables diverging components only when necessary. It works for both client + server and is not bound to any specific framework.

How it works

arc adapts files based on a filenaming convension:

style.css
style[mobile].css
style[mobile+android].css

However, you write your application as though the flagged version of files did not exist:

@import url('./style.css');

If both the mobile and android flags are set, when bundling the css, style[mobile+android].css will replace style.css in the output bundle. If only the mobile flag is set, style[mobile].css will be used.

More on flags

• Read how to set flags in the documentation for each supported environment.

• Read more about defining flags in filenames.

Use cases

Multiple platforms

For example, swap out a header component based on the user's device type:

header[mobile].js
header[desktop].js

Then, in your React component:

import Header from "./header.js";

export default () => (
   <Header/>
);

Internationalization (i18n)

For example, swap out a content bundle based on the user's locale:

content[de].json
content[en].json
content[es].json
content[fr].json

Then, in your Marko component:

import content from "./content.json";

<h1>${content.welcomeMessage}</h1>

Branding

For example, swap out a logo based on the brand the user is visiting:

logo[ebay].svg
logo[gumtree].svg
logo[vivanuncious].svg

Then, in your .html file:

<img src="./logo.svg"/>

Experimentation

For example, swap out a component based on the user's participation in an experiment:

date-picker/
   date-picker.component.css
   date-picker.component.html
   date-picker.component.ts
date-picker[date_experiment_a]/
   date-picker.component.css
   date-picker.component.html
   date-picker.component.ts

Then, in your Angular module:

import { NgModule } from '@angular/core';
import { DatePickerComponent } from './date-picker/date-picker.component';

@NgModule({
  declarations: [
    DatePickerComponent
  ]
})
export class MyModule { }

Supported environments

Please refer to the linked documentation for using arc in each environment:

• Node 8+ (arc-server)
• Webpack 4+ (arc-webpack)
• Lasso 3+ (arc-lasso)

Additional resources

Connie & Michael on arc 1.0 @ Fluent O'Reilly Conf 2017:

• Session abstract
• Recorded video

Example apps

• Simple Server
• Isomorphic Koa + Marko + Webpack TODO
• Isomorphic Express + Marko + Lasso TODO
• Isomorphic Express + React + Webpack TODO
• Client-only React + Webpack + arc-static-server TODO