Component-based Front-End architecture

1,462 views

Published on

Architecture patterns for front-end apps

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,462
On SlideShare
0
From Embeds
0
Number of Embeds
160
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Component-based Front-End architecture

  1. 1. Component—based Front—End Architecture Artyom Trityak
  2. 2. Real app? What needs to be done? Test app Pick framework . ; —— ——: , —, ———— ——— ——: ————, — —, —: ——: ~, ———— ——— ——— —————— ——— ——— —————— ——— ——: ~— ——— —r: —: ——, ——r: —— —: ——, ———— —— 7 Zltems Vefl All Active Completed
  3. 3. V ijs V E collections Q todos. js Q‘ common. ]s Q ma| n.js V E models f Iodo. Js V E routers f router. js V E templates 0 stals. htm| 0 todos. html V E views ! app-Js f 1odos. js
  4. 4. 4 III 4 Applications /4 many onuuaca. .. ummsts se-can an «ma, EL. Q6 5'! : B 6.1
  5. 5. r F, V ‘-_ «fl IE ) &eecma1ow -an-In v E <AppIlc| IloMllb1ee¢yI: ¥IIul¢I: n-‘ ‘ _Owvna= , 1% hIIIl! II| IIIII[lz£= "sl ulmllumllfi} Illmlulllmmrfigglmlinmlln IlllmluII= Er TIIIHIIII IIIIflI! !!“'m“‘EEEIIIIHIII IIIIMI M: M*. ;' mllnmlll Illgfll _MV‘flfiJIiIIIIIfl! Il Eiilmi mIh'F“ iiiiiimlii llgm§| mM4w~rw~nlm; lumllm iiilfiL mMI&; LE<: iilifiiiii ulllml Wm» nEmim. mIlumIlI nilnml _l P’ “'llIIfllIIl MIIlm1___ ~r~ ““IlIIHlIIl ugggugggga grjv muggumggq Illlwlulllfim EHEHIIIHIIII ! !!! M!! !!! !!EEi! !!! !!! !!!
  6. 6. ' ’ _ mi: a IctMIv_coI| eaionJs annuoIIxuon, |x anlsm-v: ¢sJs booklng_¢oIIen| on. ]s book| ng_nMe_col| ¢monJ5 alcndu_w¢m_wllea| ou-ls <onw: I—no(esJs f: vnrIm.1s InvoIu_! ¢D0fl_noll¢<| onJs pagIng_¢olIe<nonJs pusenmr-nous. Js Quld—suKn—no(esJs mkcollecuomls 7 I1lvel_eo| |Q¢x£onJ5 > _ dun t Iphone—sIv1e-chedxboxesds u jquuv. u|. Md9e1.]s > ( Ilb V models xcomnmdulocus amsus base_no¢eI. |s booklngas ul: ndu_¢v¢m. js mmul-)5 cven(_nmn, |s cv¢n| _rvnesJs uuusM| L|Mo. js I. Ivorlms. ]s GUJX Invol¢: _rcoon_rur~. )s perfnmIlIIc: .]s nmnwq-mart: -‘q -an-nnnmqnmn Ana-mum- Drescwwds mlck-Much-MHQJS vcvmnv-2.]: lJSk. ]s Irlveus VGHIJIJS rev ar. oomnnoduIon_edIwf. ls nntornntoaallongneuqs add-wmxus Ida-IQIIIDHWJ5 , Idmln U dlll. llNl. _V1€WJS Z Idltotls amsuemus mlsl_n| eaton_drvndawn. Js : rlIsl_SD¢¢| i|iry]s iI'l| xls_lVal| ab(IKY anm_bIa. Is amsLcom: n»Is anIxLInvo.1s mIsI_IIem. )s m| sUm1:~s, |s vtemjs : rIlsls_duI1b0lLV| !'dJ$ mum-us booK| fll_ueIl£. !v: nlJs W°HnIJ| "'. .“fllIS book| W_Dlvm¢nu_rem| nder. js I1ook| ||Lub| e.ls u| ennar_uem_nnnue9enoIre_v1uus ukndu_uuIt_¢vInLvi! wJs mm: mm-
  7. 7. Scalability? Oops. .. Ne, wordpr:5.. cam
  8. 8. No panic
  9. 9. Hierarchical MVC > E Iavouls ’ pruneniasqsnn _ rou(es. coflee > E smans 7 servemonee > E shaved v E wuduets > E about > E aflnllcatlans > E mnumun-mnzexuueaaer > E hveadcrumbs > E (Anvas > E (loud > E mnlexl-header > E mammals > E nnvuonmems > E vavome > E global-huder V E mvenlorv ' rnaIn. mlien V E models " env»apps. :ulfe2 ; lnvenxoriesxoffee v E Views _‘ env—ann~nem. cofvee * env-apps-(v. (aflee 7' mvmory~: v.co«ee ’ Inventory-1tem. (olfee > E temnlaus E jobs E main—menu E menu v v v V E inventory ‘ maIn. coffee V E models _L env—apps. coffee inventoriesxoffee V E views * env—app—item. coffee env—apps—cv. coffee inventory—cv. coffee inventory—ilem. coffee > E templates
  10. 10. Component structure Component Folder V inventory _' malmcolfee models ’ env-apps. :of’fee ’ inventorlesxofiee - Views (Views, Directives) ' WW5 ’ env-app—ltem. coffee env—apps-cv. coffee ' Public APl (Contro| |er)* inventory-cvxoffee ’ inventory—item. (offee > templates - Data Layer (models, collections, services) *At Angularjs app Services provides component Public AF’l
  11. 11. Controller - Views, Models creation - Public API, Listening events - Configuring initial state of component - Business logic
  12. 12. Controller implementation - Bacl<bone. Controller - l"larionette. Controller - Angularjs Controller
  13. 13. Data Layer ° Fetching/ saving data (ajax, jsonp etc) ° Storing data and state - Data operations (sorting, filtering, processing)
  14. 14. Data Layer examples - Bac| <bone. l"| ode| - Bac| <bone. Co| |ection - Angularjs Service
  15. 15. Views ° Rendering templates ° DOM events binding (clicl<s, hovers etc) - Data Layer ~ DOM binding (I-2 way) - No logic. NO LOGIC = > - Triggering actions events to controller
  16. 16. Views examples - Bac| <bone. View - Angulaitjs Directive
  17. 17. What next? Components communication Publish L516” . . fj} U56‘ -Set US€I"Ig€t Component Component CV Users Get CV for User X
  18. 18. Deferred / Promises then K4657 jQuery. deferred Q
  19. 19. Deferred / Promises var defer Q. defer(); app. trigger('cv: user: get', defer); defer. promise. done(function(userData) { CVMode1.save(userData); });
  20. 20. Deferred / Promises get data App I N Server
  21. 21. Components communication deferred — Li sten US€I"Ig€t % resolve Component CV Component Users Get CV for User X
  22. 22. Deferred / Promises this. getApp1ication() . then(this. getUser()) . then( (results) { return se1f. mode1.save(resu1ts); }) . then(this. updateStatus) . fai1( (error) { ('Error: '+error); }):
  23. 23. Deferred / Promises 0L. =_IITil. § fiiirfil-_~L-, g1:iiv: ,0l, ~|*‘ iilix= ,Ian(~iu:1-I: ;:t-1:: ( -r= ,a-_-I_- ~ r'aI'iIIlr'| n ; I=I! iF . :ut-xoil= Il. ... rmvI; IE, -r: I.~uliis: :)-s , ‘iiirjl-rt-91-eiilll-rt-sIr'( I II 9 EM ‘ilix-. nI_¢"iliI-in-x «u '| *- ‘T14-. 'ii. I=_ifi-II_L; p> riiilfiLt, ‘i{IIltI! l‘jtItlC§Ir'r'oIr‘) = {' = jk= Ir‘i= Z( 'EIr'flolr‘-4 ‘: :=Ir'II’9Ir‘3-1 M‘-, I
  24. 24. Global events: naming Project prefi><: Modu| e name: Event name EC: USERS: GET EC: |NVENTO RY: RES ET EC: |NVENTORY: LOADED
  25. 25. m—IZI'n<I'n Users Steps Menu Zoom Screens ‘? Steps Screen - Initialize components % - Define screen routes - Define screen logic % ‘? Userdetaiis
  26. 26. Q Artyom Trityak github: @artyomtritya| < skype: art. tritya| <

×