Front-End Architecture for Large Scale Apps - Gabriel Zigolis

Post on 21-Jul-2015

1,322 views 0 download

Tags:

transcript

Gabriel Zigolis

SCALE APPSLARGE

FORARCHITECTURE

FRONT-END

Front-End Architect at Arezzo@zigolis

“Absolutely nothing”

FRONT-END

DO

ESWTFARCHITECTURE

A

DO

FIRSTword that comes to

MIND…

JAVABAD?

SOIS

WHAT’S THERESULT?OF THIS

AND?THIS

YOU ?THISKNOWDO

MATTER?ITDOES REALLY

HYBRIS

YES, IT MATTERS!

ATGWEBSPHERE

WE DEVELOP FOR

DOWHY

IE 8,9…

USERS!THEY ARE THE ANSWER.

AREZZOCUSTOMERS

AGESYSTEM

BROWSER

20~65

90%GATES 15%

IE 8~9

DOWHAT DOES IT MEAN

KNOW

YOU

?15% WEB

SELLS15$ IE

8~9

THAT'STO SUPPORT THEM

WE NEED

WH

Y

RESPONSIVE

MOBILE VERSIONOR?

SCHUTZE-COMMERCE

20% WEB

SELLS4$ MOBILE

before responsive

SCHUTZE-COMMERCE

-80%

after responsive

4$20% WEB

SELLS

REQUIRE

BROWSERIFYOR

?

Gabriel Zigolis, just a developer

“There’s no reason to compare them, they are completely different.”

Stop!

NICE TO MEET YOU

I’m re

quire

();

requirejs.org

“It's a Javascript file and module loader.Using a modular script loader like RequireJS will improve the speed

and quality of your code.”

require();

HAVING

FUN WITH

require(bodyClass);

var configMap = [module];

<body class="cart">

GOINGbeyond the wall!!!

COMMON

JSFILES

require(general);

var configMap = [general];

define (general, []);

DEMANDJS O

N

LET’S in small pieces…THINK

Gabriel Zigolis, just a developer

“It makes a lot of sense to only load fileswhen the user require them.”

Think!

var configMap = [delivery];

NEED TO WE

CODE!!!

BACKBONE JS

ANGULAR JSOR?

Gabriel Zigolis, just a developer

“It's so personal that becomes stupid to start an argument about it.”

Bullshit!

backbonejs.org

“Gives structure to web applications by providing models, collections and views to consume API over

a RESTful JSON interface.”

CHARACTERISTICS

• Powerful Javascript LIB

• Adaptable, inspired on MV* pattern

• Modern, widely used in SPA

• Completely skinny, bitch! Just 7.3kb (1.2.0)

USE WHY

BACKBONE?or any other lib, framework…

BECAUSEAPPS TH

E

GREW UP

NEEDING

OrganizationArchitecture

Modularization

MORE

Backbone Cart();

Instancing features!

WHERE IS

THEDELIVERY

?

Delivery on demand!

Backbone DeliveryView();

Backbone DeliveryModel();

Backbone Rocks!!!

WE do more…CAN

OR?

Gabriel Zigolis, just a developer

“Man, it’s up to you!”

Really, again?

BACKBONE VIEW

REACTOR?

Let’s talk!

Gabriel Zigolis, just a developer

“There is no magic or perfect solution,just your necessity and sense!”

What’s the idea?

Gabriel Zigolis

@zigolis