Uniform code – Service discovery – Reusable code

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

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

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

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 (