Front-End Architecture for Large Scale Apps - Gabriel Zigolis

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

43d65af5d3659abff531fa679260e381?s=128

Gabriel Zigolis

May 16, 2015
Tweet

Transcript

  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…

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. JAVA BAD ? SO IS

  13. None
  14. None
  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!!!

  60. None
  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?
  67. None
  68. Gabriel Zigolis @zigolis