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?