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

FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh

08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls

08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls

Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software

My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar

Pigging Solutions Piggable Sweeping ElbowsPigging Solutions

IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106

Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxnull - The Open Security Community

Presentation on how to chat with PDF using ChatGPT code interpreternaman860154

Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK

SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren

SIEMENS: RAPUNZEL – A Tale About Knowledge GraphNeo4j

AI as an Interface for Commercial BuildingsMemoori

How to convert PDF to text with Nanonetsnaman860154

Benefits Of Flutter Compared To Other FrameworksSoftradix Technologies

Artificial intelligence in the post-deep learning eraDeakin University

Understanding the Laravel MVC ArchitecturePixlogix Infotech

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal

Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j

Recently uploaded (20)

FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi

08448380779 Call Girls In Civil Lines Women Seeking Men

08448380779 Call Girls In Diplomatic Enclave Women Seeking Men

Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation

My Hashitalk Indonesia April 2024 Presentation

Pigging Solutions Piggable Sweeping Elbows

IAC 2024 - IA Fast Track to Search Focused AI Solutions

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics

Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx

Presentation on how to chat with PDF using ChatGPT code interpreter

Unblocking The Main Thread Solving ANRs and Frozen Frames

SQL Database Design For Developers at php[tek] 2024

SIEMENS: RAPUNZEL – A Tale About Knowledge Graph

AI as an Interface for Commercial Buildings

How to convert PDF to text with Nanonets

Benefits Of Flutter Compared To Other Frameworks

Artificial intelligence in the post-deep learning era

Understanding the Laravel MVC Architecture

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service

Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...

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