• Front-end arquitectures

• Squads overview

• Values

• Stack

• Best practices

• Organization

• Challenges

• Continuous Improvement

Front-end arquitectures: Monolith

Full app returns client side render

e-shop

simple

SEO friendly

high resources

slow delivery cadence

messy code

silos

front-end

back-end

Fat client

Separation of concerns

Better user experience

No SEO friendly

First time render experience

microservices

Front-end arquitectures: Frontend & Back-end

Front-end client & server bundle

Better user experience

Time to first render

SEO friendly

Isomorphic code

back-end

microservices

client

server

Front-end arquitectures: Universal client (I)

Front-end arquitectures: Universal client (II)

Core vs brand specific services

Code reuse

Tech convergence

Team mobiity

Isomorphic code

domain shared

models

services

selectors

helpers

reducers

ui shared

brand-1

brand-2

Front-end arquitectures: Multibrand client

components

styles

components

selectors helpers

reducers styles

components

selectors helpers

reducers styles

SQUADS OVERVIEW

Thor

Yoigo e-shop channel

D-Hub assemble

Angular+Universal

yoigo.com

Lumiere

Yoigo e-care channel

D-Hub assemble

Angular

miyoigo.yoigo.com

Pepe

E-shop

E-care

Apps

React+Next

React+Native

Odissey

Yo soy más

MásMóvil e-care

LlamaYa e-care

PHP

Ovid

VALUES

BOY
SCOUT
RULE

FIRST
TIME
RIGHT

OPEN
SOURCE
SPIRIT

  Listen to the communnity

  Collaborate & share

  DRY

  Automate all the things!

  Processes documentation

LEAD
BY
EXAMPLE

BEST PRACTICES

NAMING

There are only two hard things in Computer Science:

cache invalidation and naming things.

Phil Karlton

MODULES

CODE SPLITTING 👎

CODE SPLITTING 👍

CODE SPLITTING 👎

Modules

• Bloated shared
• Imports dependency

High order dependency

TariffModule

TariffCard

TerminalModule

TerminalCard

OfferCard

High order dependency

TariffModule

selectUserTariffPrice

DeviceModule

selectUserDevicePrice

selectTotalPrice

CODE SPLITTING 👍

CODE REVIEW

todo

doing

CR

QA

CAN

PROD

Definition of "Production Ready"

VISUAL MANAGEMENT

SQUASH + MERGE

Autogenerated changelog!

STACK

FORMIK

REACT WAY

NG WAY

ENZYME

ORGANIZATION

Why

• Several teams in different projects
• The nth shared-component problem and mistakes
• Lack of cross-team visibility
• Missing knowledge
• No learning, just doing
• One man battle
• No quality baseline

• Healthy community
• Share knowledge
• Cross-team visibility
• Cross team communication
• Servant Leadership

What we do

Leadership

Leadership

CHALLENGES

Culture

Share values of quality, accountability and collaboration

@puratura

Best practices

• Team Agreements

  • Agreements visibility

  • Source of truth

  • onboarding step

Tech convergence

• Stack
  • new projects in React
• Coverage service
  • Unify service integration
  • Clientside integration constraints
• Multi-brand
  • e-shop
  • e-care
• Centralized/shared Analytics
  • Share knowledge
  • Centralize operations

CONTINUOUS IMPROVEMENT

"If you can't measure it, you can't improve it."

Project Scoring

How good are we at...?

• Tech stuff
• DevOps
• QA
• Agile

Yes/No questions

• Yes = 1 point
• No = 0 points

based in Joel test

Project Scoring

• Do we have version control of our code?
• Do we have an up-to-date bug tracking?
• Do we have documentation for the business process related to our project?
• Do we define well-documented PR's so anyone can manually test it?
• Do we actually review other member's pull-request?
• Do we have access to the best tools the budget can afford?
• Do we apply automatic checkers to lint and format our code?
• Can we launch A/B tests with feature flags?
• Do we have a well-defined onboarding process to new members?

General stuff

Project Scoring

• Can we release our project just by "1 click"?
• Can we release our project on-demand?
• Is the project dockerized?
• It's possible to create feature branches easily?
• Can we apply a project config in runtime?

DevOps friendly

Project Scoring

• Do we have test specs for the project?
• Do we have an acceptance test for each user history?
• Do we have QA members in the team?
• Do we have a test report per environment that is accessible to all members of the team?
• Do we have a coverage report per environment that is accessible to all members of the team?
• Do we do user test for new features?
• Do we do run tests at every commit?
• Do we run linters at every commit?

QA friendly

Project Scoring

• Do we have knowledge about the process from de US definition to prod release?
• Do we have a clear vision which is the priority?
• Do we have identified and agreed with PO the technical debt of the project?
• Do we have a Definition of Ready (DoR)?
• Do we have a Definition of Done (DoD)?
• Do the team have a Definition of Production Ready (DoPR)?
• Do we do postmortems after a service downtime?

Agile friendly

Let us know you better

http://bit.ly/mm-devs-survey

• How well are we doing?
• Which pain-points do we have?
• Who we are?