Slide 1

Slide 1 text

Gabriel Zigolis SCALE APPS LARGE FOR ARCHITECTURE FRONT-END

Slide 2

Slide 2 text

Front-End Architect at Arezzo @zigolis

Slide 3

Slide 3 text

“Absolutely nothing” FRONT-END DOES WTF ARCHITECTURE A DO

Slide 4

Slide 4 text

FIRST word that comes to MIND…

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

JAVA BAD ? SO IS

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

WHAT’S THE RESULT ? OF THIS

Slide 16

Slide 16 text

AND ? THIS

Slide 17

Slide 17 text

YOU ? THIS KNOW DO

Slide 18

Slide 18 text

MATTER? IT DOES REALLY

Slide 19

Slide 19 text

HYBRIS YES, IT MATTERS! ATG WEBSPHERE

Slide 20

Slide 20 text

WE DEVELOP FOR DO WHY IE 8,9…

Slide 21

Slide 21 text

USERS! THEY ARE THE ANSWER.

Slide 22

Slide 22 text

AREZZO CUSTOMERS AGE SYSTEM BROWSER 20~65 90% GATES 15% IE 8~9

Slide 23

Slide 23 text

DO WHAT DOES IT MEAN KNOW YOU ? 15% WEB SELLS 15$ IE 8~9

Slide 24

Slide 24 text

THAT'S TO SUPPORT THEM WE NEED WHY

Slide 25

Slide 25 text

RESPONSIVE MOBILE VERSION OR ?

Slide 26

Slide 26 text

SCHUTZ E-COMMERCE 20% WEB SELLS 4$ MOBILE before responsive

Slide 27

Slide 27 text

SCHUTZ E-COMMERCE -80% after responsive 4$ 20% WEB SELLS

Slide 28

Slide 28 text

REQUIRE BROWSERIFY OR ?

Slide 29

Slide 29 text

Gabriel Zigolis, just a developer “There’s no reason to compare them, they are completely different.” Stop!

Slide 30

Slide 30 text

NICE TO MEET YOU I’m require();

Slide 31

Slide 31 text

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();

Slide 32

Slide 32 text

HAVING FUN WITH

Slide 33

Slide 33 text

require(bodyClass);

Slide 34

Slide 34 text

var configMap = [module];

Slide 35

Slide 35 text

Slide 36

Slide 36 text

GOING beyond the wall!!!

Slide 37

Slide 37 text

COMMON JS FILES

Slide 38

Slide 38 text

require(general);

Slide 39

Slide 39 text

var configMap = [general];

Slide 40

Slide 40 text

define (general, []);

Slide 41

Slide 41 text

DEMAND JS ON

Slide 42

Slide 42 text

LET’S in small pieces… THINK

Slide 43

Slide 43 text

Gabriel Zigolis, just a developer “It makes a lot of sense to only load files when the user require them.” Think!

Slide 44

Slide 44 text

var configMap = [delivery];

Slide 45

Slide 45 text

NEED TO WE CODE!!!

Slide 46

Slide 46 text

BACKBONE JS ANGULAR JS OR ?

Slide 47

Slide 47 text

Gabriel Zigolis, just a developer “It's so personal that becomes stupid to start an argument about it.” Bullshit!

Slide 48

Slide 48 text

backbonejs.org “Gives structure to web applications by providing models, collections and views to consume API over a RESTful JSON interface.”

Slide 49

Slide 49 text

CHARACTERISTICS • Powerful Javascript LIB • Adaptable, inspired on MV* pattern • Modern, widely used in SPA • Completely skinny, bitch! Just 7.3kb (1.2.0)

Slide 50

Slide 50 text

USE WHY BACKBONE ? or any other lib, framework…

Slide 51

Slide 51 text

BECAUSE APPS THE GREW UP

Slide 52

Slide 52 text

NEEDING Organization Architecture Modularization MORE

Slide 53

Slide 53 text

Backbone Cart();

Slide 54

Slide 54 text

Instancing features!

Slide 55

Slide 55 text

WHERE IS THE DELIVERY ?

Slide 56

Slide 56 text

Delivery on demand!

Slide 57

Slide 57 text

Backbone DeliveryView();

Slide 58

Slide 58 text

Backbone DeliveryModel();

Slide 59

Slide 59 text

Backbone Rocks!!!

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

WE do more… CAN

Slide 62

Slide 62 text

OR ?

Slide 63

Slide 63 text

Gabriel Zigolis, just a developer “Man, it’s up to you!” Really, again?

Slide 64

Slide 64 text

BACKBONE VIEW REACT OR ?

Slide 65

Slide 65 text

Let’s talk!

Slide 66

Slide 66 text

Gabriel Zigolis, just a developer “There is no magic or perfect solution, just your necessity and sense!” What’s the idea?

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

Gabriel Zigolis @zigolis