Schibsted FrontEnd Architecture

Component-based UI

Carlos Villuedas | @carlosvillu
Joan Leon | @nucliweb

What is Schibsted?

Motivation

Out with the monolith in frontend architecture

Where we're going

In with a fully reusable UI with components

Requirements

  • Design oriented to components (smart objects in PS)
  • Out with spaghetti code, in with clean code in frontend!
  • Backend oriented to APIs (micro-services)
  • Everything is open source (or as much as possible)
  • UI technology gets old quickly

Free FE from BE monolith!

Maximal reuse of components

How we've done it

  • uniform code
  • service discovery
  • reusable code
  • UI-free solution

Uniform code

Generator

  • tests
  • documentation
  • common tasks

npm install -g @schibstedspain/generator-sui-react

Precommit rules

  • lint SCSS
  • lint JS
  • Babel setting
  • editor setting
  • versioning

npm install @schibstedspain/frontend-pre-commit-rules

Service discovery

Reusable code

Container components

SUI components

re, ji, mt *-components

"Themable" components (SUIT standard)

Basic theme


npm install @schibstedspain/theme-basic

Re-theme, ij-theme, mt-theme

Fotocasa theme

npm install @schibstedspain/re-theme-fotocasa

UI-free solution

How we've done it


npm install @schibstedspain/real-estate


	RealEstate.get('autocompleted_search_use_case')
	.execute({query 'barcelon'})
	.then(locations => {
	    // location is an array of LocationValueObject
	})
	.catch(err => {
	    // err is an instance of Error
	});

This is isomorphic code!!

What should go inside of that?!

  • calls to other systems
  • validations
  • calculations

Problems...

I18N for open source code

Our answer: Rosetta

https://github.com/SUI-Components/rosetta

npm install @schibstedspain/rosetta


	import i18n from '@schibstedspain/rosetta';
	import polyglot from '@schibstedspain/rosetta/lib/adapters/polyglot';

	i18n.adapter = polyglot;
	i18n.translations = {
	    'HELLO_WORLD': 'Hola mundo!'
	};

	i18n.t('HELLO_WORLD') //=> Hola mundo!


	import React from 'react';
	import {rosetta} from '@schibstedspain/rosetta';

	 @rosetta //=> This decorator allows us to update all components if there is a change of language
	 class App extends React.Component {
	    render(){
	        
} }

Tracking

Our answer: Suntory

https://github.com/SUI-Components/suntory

npm install @schibstedspain/suntory


		import suntory from '@schibstedspain/suntory';

		@suntory({
		  'mouseover [data-click]': function(e) { console.log(e.target) }
		})
		class List extends React.Component {
		  render() {
		    return (
		        
) } }

FYI, we use ReactJS to create the DOM

Questions?

Thank you!