Front-End Architecture for Large Scale Apps - Gabriel Zigolis

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

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. FIRST word that comes to MIND…
12. JAVA BAD ? SO IS
15. WHAT’S THE RESULT ? OF THIS
16. AND ? THIS
17. YOU ? THIS KNOW DO
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. AREZZO CUSTOMERS AGE SYSTEM BROWSER 20~65 90% GATES 15% IE 8~9
23. DO WHAT DOES IT MEAN KNOW YOU ? 15% WEB SELLS 15$ IE 8~9
24. THAT'S TO SUPPORT THEM WE NEED WHY
25. RESPONSIVE MOBILE VERSION OR ?
26. SCHUTZ E-COMMERCE 20% WEB SELLS 4$ MOBILE before responsive
27. SCHUTZ E-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’m require();
31. 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();
32. HAVING FUN WITH
33. require(bodyClass);
34. var configMap = [module];
35. <body class="cart">
36. GOING beyond the wall!!!
37. COMMON JS FILES
38. require(general);
39. var configMap = [general];
40. define (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 files when the user require them.” Think!
44. var configMap = [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 GREW UP
52. NEEDING Organization Architecture Modularization MORE
53. Backbone Cart();
54. Instancing features!
55. WHERE IS THE DELIVERY ?
56. Delivery on demand!
57. Backbone DeliveryView();
58. Backbone DeliveryModel();
59. Backbone Rocks!!!
61. WE do more… CAN
62. OR ?
63. Gabriel Zigolis, just a developer “Man, it’s up to you!” Really, again?
64. BACKBONE VIEW REACT OR ?
65. Let’s talk!
66. Gabriel Zigolis, just a developer “There is no magic or perfect solution, just your necessity and sense!” What’s the idea?
68. Gabriel Zigolis @zigolis