Front-End Architecture for Large Scale Apps - Gabriel Zigolis

•

5 likes•2,460 views

The Developers Conference 2015 Gabriel Zigolis' presentation for TDC Floripa 2015 about Front-End Architecture for Large Scale Apps

Technology

Gabriel Zigolis
SCALE APPS
LARGE
FOR
ARCHITECTURE
FRONT-END

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

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

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

SCHUTZE-COMMERCE
20%
WEB
SELLS
4$ MOBILE
before responsive

SCHUTZE-COMMERCE
-80%
after responsive
4$
20%
WEB
SELLS

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

requirejs.org
“It's a Javascript ﬁle and module loader.
Using a modular script loader like
RequireJS will improve the speed
and quality of your code.”
require();

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

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…

NEEDING
Organization
Architecture
Modularization
MORE

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

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

Viewers also liked

Frontend Application Architecture, Patterns, and WorkflowsTreasure Data, Inc.

Choosing a JavaScript FrameworkTreasure Data, Inc.

Boosting Your Productivity, with Backbone & RactiveJS Gabriel Gottgtroy Zigolis

Ractive jsKnoldus Inc.

Front End Best PracticesHolger Bartel

AngularJS - Architecture decisionsin a large project Elad Hirsch

React JS and why it's awesomeAndrew Hull

Viewers also liked (7)

Frontend Application Architecture, Patterns, and Workflows

Choosing a JavaScript Framework

Boosting Your Productivity, with Backbone & RactiveJS

Ractive js

Front End Best Practices

AngularJS - Architecture decisionsin a large project

React JS and why it's awesome

Similar to Front-End Architecture for Large Scale Apps - Gabriel Zigolis

Future insightsScott Jenson

WSO2Con US 2013 - Thinking of you. Customizing the store of the WSO2 API Mana...WSO2

Commercialization Challenges Of Mobile Software Development In A Fragmented M...Stephen King

7 ERRORI COMUNI NELLA PROGETTAZIONE DI UN PRODOTTO DIGITALEGerardo Forliano

Coding for DesignersMilly Schmidt

TOP 5 apps from CES 2014ComboApp, Inc

Desenvolvimento de Apps multiplataforma para dispositivos móveis com HTML5Intel Software Brasil

Apps multiplataforma com HTML5Jomar Silva

Mobile App Feature Configuration and A/B Experimentslacyrhoades

Openbar Kontich // Mobile app automation on a budget by Wim Vervust & Bram ThysOpenbar

Design mobile-apps-htm5-css3-2012Luis Alejandro Ramírez Gallardo

Designing Mobile Apps with HTML5 & CSS3Johannes Ippen

Mensworldhq.com 5 g is going to change everything look whats coming -augment...Paul Brooks

Apps vs BrowserWunderman

This is the web platformPaul Kinlan

Of innovation and impatience - Future Decoded 2015Christian Heilmann

The Future is ResponsiveZURB

Making your app see with Mobile Vision APIRamon Ribeiro Rabello

Dead & Emerging Tech Panelamanda etches

Ten Lessons in Designing Content for MobileVicke Cheung

Similar to Front-End Architecture for Large Scale Apps - Gabriel Zigolis (20)

Future insights

WSO2Con US 2013 - Thinking of you. Customizing the store of the WSO2 API Mana...

Commercialization Challenges Of Mobile Software Development In A Fragmented M...

7 ERRORI COMUNI NELLA PROGETTAZIONE DI UN PRODOTTO DIGITALE

Coding for Designers

TOP 5 apps from CES 2014

Desenvolvimento de Apps multiplataforma para dispositivos móveis com HTML5

Apps multiplataforma com HTML5

Mobile App Feature Configuration and A/B Experiments

Openbar Kontich // Mobile app automation on a budget by Wim Vervust & Bram Thys

Design mobile-apps-htm5-css3-2012

Designing Mobile Apps with HTML5 & CSS3

Mensworldhq.com 5 g is going to change everything look whats coming -augment...

Apps vs Browser

This is the web platform

Of innovation and impatience - Future Decoded 2015

The Future is Responsive

Making your app see with Mobile Vision API

Dead & Emerging Tech Panel

Ten Lessons in Designing Content for Mobile

Recently uploaded

Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfFIDO Alliance

Design Guidelines for Passkeys 2024.pptxFIDO Alliance

Vector Search @ sw2con for slideshare.pptxjbellis

ADP Passwordless Journey Case Study.pptxFIDO Alliance

Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...FIDO Alliance

Event-Driven Architecture Masterclass: Challenges in Stream ProcessingScyllaDB

Collecting & Temporal Analysis of Behavioral Web Data - Tales From The InsideStefan Dietze

Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...FIDO Alliance

Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...ScyllaDB

Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfFIDO Alliance

Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfFIDO Alliance

Design and Development of a Provenance Capture Platform for Data SciencePaolo Missier

Introduction to FIDO Authentication and Passkeys.pptxFIDO Alliance

AI mind or machine power point presentationyogeshlabana357357

Generative AI Use Cases and Applications.pdfalexjohnson7307

ERP Contender Series: Acumatica vs. Sage IntacctBrainSell Technologies

Long journey of Ruby Standard library at RubyKaigi 2024Hiroshi SHIBATA

TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc

The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software

2024 May Patch TuesdayIvanti

Recently uploaded (20)

Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf

Design Guidelines for Passkeys 2024.pptx

Vector Search @ sw2con for slideshare.pptx

ADP Passwordless Journey Case Study.pptx

Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...

Event-Driven Architecture Masterclass: Challenges in Stream Processing

Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside

Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...

Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...

Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf

Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf

Design and Development of a Provenance Capture Platform for Data Science

Introduction to FIDO Authentication and Passkeys.pptx

AI mind or machine power point presentation

Generative AI Use Cases and Applications.pdf

ERP Contender Series: Acumatica vs. Sage Intacct

Long journey of Ruby Standard library at RubyKaigi 2024

TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...

The Zero-ETL Approach: Enhancing Data Agility and Insight

2024 May Patch Tuesday

Front-End Architecture for Large Scale Apps - Gabriel Zigolis

1. Gabriel Zigolis SCALE APPS LARGE FOR ARCHITECTURE FRONT-END

2. Front-End Architect at Arezzo @zigolis

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

4. FIRSTword that comes to MIND…

10.

11.

12. JAVA BAD ? SO IS

13.

14.

15. WHAT’S THE RESULT ?OF THIS

16. AND ?THIS

17. YOU ? THIS KNOWDO

18. MATTER ?IT DOES REALLY

19. HYBRIS YES, IT MATTERS! ATG WEBSPHERE

20. WE DEVELOP FOR DO WHY IE 8,9…

21. USERS!THEY ARE THE ANSWER.

22. AREZZOCUSTOMERS AGE SYSTEM BROWSER 20~65 90% GATES 15% IE 8~9

23. DOWHAT DOES IT MEAN KNOW YOU ? 15% WEB SELLS 15$ IE 8~9

24. THAT'STO SUPPORT THEM WE NEED WHY

25. RESPONSIVE MOBILE VERSION OR ?

26. SCHUTZE-COMMERCE 20% WEB SELLS 4$ MOBILE before responsive

27. SCHUTZE-COMMERCE -80% after responsive 4$ 20% WEB SELLS

28. REQUIRE BROWSERIFY OR ?

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

30. NICE TO MEET YOU I’mrequire();

31. requirejs.org “It's a Javascript ﬁle and module loader. Using a modular script loader like RequireJS will improve the speed and quality of your code.” require();

32. HAVING FUN WITH

33. require(bodyClass);

34. var conﬁgMap = [module];

35. <body class="cart">

36. GOINGbeyond the wall!!!

37. COMMON JSFILES

38. require(general);

39. var conﬁgMap = [general];

40. deﬁne (general, []);

41. DEMAND JS ON

42. LET’S in small pieces…THINK

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

44. var conﬁgMap = [delivery];

45. NEED TO WE CODE!!!

46. BACKBONE JS ANGULAR JS OR ?

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

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

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

50. USE WHY BACKBONE?or any other lib, framework…

51. BECAUSE APPS THE GREWUP

52. NEEDING Organization Architecture Modularization MORE

53. Backbone Cart();

54. Instancing features!

55. WHERE IS THEDELIVERY ?

56. Delivery on demand!

57. Backbone DeliveryView();

58. Backbone DeliveryModel();

59. Backbone Rocks!!!

60.

61. WE do more…CAN