Frontend evolution on 1st wagering WebApp in Australia

  

Wilson Mendes

GDE Angular

@willmendesneto

So, let's start?

Once upon a time...

What if ...

...we need to add a new brand using the same codebase as well, but with different behaviours?

maintain

evolve

test

scale

 

It's hard to:

Separate concepts

+ Maintain

+ Test

+ Debug

Live Scores

Domain in clients

Not enought test scenarios

Coupled code

 

Problems to solve

Sacrificial Architecture

Support for old and new clients

Remove logic from clients

Remove coupled deployments

Problems to solve

web

mobile

Providers

===

Reusability

Example: Affiliate links

...
.config(affiliateLinksProvider => {
  ...
  return affiliateLinksProvider.register({
    href: '/casino',
    alt: 'SunCasino',
    image: '/images/suncasino-logo.svg',
    current: isCasino
  });
});


...
.provider('affiliateLinks', () => {
  const links = [];
  ...
  return {
    register: (attributes) => {
      return links.push(attributes);
    },
    $get: () => {
      return {
        hasAny: links.length > 0,
        all: links
      };
    }
  };
});
    <div class="affiliate-links">
      <div class="nav-items-group">
        <a
          class="nav-item"
          target="_self"
          ng-repeat="link in links track by link.href"
          ng-class="{ 'active': link.current }"
          ng-click="setActive(link)"
          ng-href="{{ ::link.href }}">
          <img
            ng-src="{{ ::link.image }}"
            alt="{{ ::link.alt }}">
        </a>
      </div>
    </div>

NOT BAD

Why ?

Stateless components (tables, render data, etc)

Upgrade to Angular2

Performance issues

Why track loop is important in your angular apps

Why ?

How can I test?

What I need to test

(behaviours, events, logic)?

Maintainability?

 

 

Before

8%

How to improve that?

Find your pain points

Create scenarios

Avoid hard setup

Test setup by behaviour

Easy to validate

Encourage refactor across teams

Expose what's happening

After

72%

Async code

is...


# Makefile

...
PATH      := $(PATH):node_modules/.bin
SHELL     := bash -eu -o pipefail -c
CPUS      ?= $(shell node -p "require('os').cpus().length" 2> /dev/null || echo 1)
MAKEFLAGS += --warn-undefined-variables --no-builtin-rules --output-sync
MAKEFLAGS += --jobs $(CPUS)
...

Build time on Travis-CI

Moving to Buildkite

Build artifact

Easy setup

Easy integration

Why ?

Test environment by branch

Easy to test

Easy to deploy

Melbourne Cup 2016

55,000 concurrent users

175,000 concurrent users (web+mobile)

2.7 TB transfered

30k per second

Changing

as organization

TABCorp Radar

Spotify model

Divide

to

Conquer

The

Strangler

Pattern

The micro* way

Microservices, microframeworks, micro-whatever...

About how easy is to upgrade your app

Modularizing everything

Next step: Agnostic Apps *

 

Angular? React?

We don't care!

* = Or we can reuse everything that is possible

Be lazy, guy

... And don't forget this, ok? Or ...

#thanksMate

#gracias

#obrigado

Wilson Mendes

@willmendesneto

Frontend evolution on 1st wagering WebApp in Australia

By willmendesneto

Frontend evolution on 1st wagering WebApp in Australia

In this talk I will share a success case of how we changed a coupled, hard to maintain/evolve codebase and some actions for tracking its real problems. How tracking performance, code coverage, pain points and other topics helped us in the journey to evolve the platform and the next improvement steps.

  • 266
Loading comments...

More from willmendesneto