Front End Recreation

Igal Steklov

Front End Team Leader

What did we do
and why?

Technological Stack

Technological Stack

Wix-Angular

• Yeoman generator
• Internal bower register
• Adopted my multiple teams at Wix
• Internal open source
• Public (partial) open source
  at                .com/wix

Large Scale

Large Scale

VERY

Minimum Viable Product

Minimum is a lot

...because of the old product

Use BI

to define our average store

Use BI

to compare new and old

(after launch)

Large Team

From 8 to ~35 People

• 12 Front end devs
• 7 Back end devs (2 in Ukraine)
• 1 Automation
• 2 QAs (Ukraine)
• 4 Products
• 3 UX designers
• 1 BI
• 1 Copywriter
• 1 Marketing
• 1 Support

Client or Server Teams
vs.
Feature Teams (Squads)

Knowledge Sharing Sessions

Micro Services

Our Repositories

100% Code

Covered by Tests

Goal:

Unit Tests

System Tests

E2E Tests

First time server and client projects integrate

Git:
Rebase, not Merge

With merge there is no revert

merge

rebase

Technology
and
Workflow

When to Deploy
New Code?

Develop on Production

• Best staging is production

• Postmortem when production breaks

How does a feature pushed to production?

1. Create a Feature Toggle, set it to closed
2. Override Feature Toggle's to true for your User ID 
3. Start development
4. (Almost) Daily push code to production
5. Finish the feature
6. Gradually expose the feature to users by  A/B Test
7. Monitor errors, logs, BI, Biz KPIs (# of premiums)

Monitoring Systems

Tests, BI and BAM (Business Activity Monitoring) alerts

Objects, not Pages

CSS Framework

CSS today is...

• Powerful
• Has pre-processors
• Cross-browser
• More complex

// ==================================
// =| 3rd Party Dependencies |=======
// ==================================
@import "compass";

// ==================================
// =| Modules |======================
// ==================================
@import "modules/mixins";
@import "modules/variables";

// ==================================
// =| Core |=========================
// ==================================
@import "core/common";
@import "core/skin";
@import "core/glyphicons";

// ==================================
// =| Components |===================
// ==================================
@import "components/buttons";
@import "components/inputs";
@import "components/loader";
@import "components/textarea";

Modularity

OOCSS     

          {
  object-oriented: css;
}

OOCSS

Lego Parts

Atomic Design

Store Manager UI Components

Store Manager Assembled UI

Vector Graphics 

Icons Font

SVG

Client Side App

Server
Provides
Persistence

One Point for
Data Entry

One Point for Data Entry

Why?

• Better user experience
• Offline usage
• Can be packaged with PhoneGap
• "Standalone" application

Server Side Rendering
vs.
Client Side Rendering

We Do Both