Skip to content

eBay/arc

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


ebay open source MIT licensed travisci build Codecov npm version downloads


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

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:

Additional resources

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

Example apps