Semper studui quomodo Habr ab intus structus sit, quomodo opera structa, quomodo communicationes exstructae, quae signa adhibeantur et quomodo codicem hic in genere scriptum sit. Fortunate, occasionem nactus sum, quod nuper in turmas habrae factus sum. Utens exemplo parvae reformationis versionis mobilis, conabor interrogationi respondere: quid est hic operari in prima acie? In programmatis: Node, Vue, Vuex et SSR cum liquamine ex notis circa experientiam personalem in Habr.
Primum opus est scire de quadrigis progressionis quod parvi sumus. Parva sunt tria frontes, duo dorsa et plumbum technicum omnium Habr - Baxley. Est sane etiam probator, excogitator, tres Vadim, ruscum miraculum, venalicium et alia Bumburums. Sed tantum sex sunt adiutores directi in locis Habr. Hoc admodum rarum est - consilium cum multimillion pupa audientibus, quod extrinsecus velut inceptum ingens spectat, re vera magis similis est fovere startup cum planissima structura organica.
Sicut multae aliae IT societates, Habr ideas Agile profitetur, exercitia CI, et omnia omnia. At mea sententia, Habr ut opus in undis potius quam continue progrediatur. Itaque, pluribus stimulis in ordine, diligenter aliquid codicem, designa et redesigno, aliquid frange et illud refice, tesseras compone et novas crea, in rastro pone, et nos in pedes iace ut tandem plumam in emitteret. futurum. Accidit deinde quaedam quies, tempus redintegrationis, tempus faciendi quod in quadrante “magna non urgente” est.
Hoc ipsum "tempus" concitus infra dicetur. Hoc tempore comprehendit reformationem versionis mobilis Habr. Communitas in genere magnam spem habet, et in posterum totum ferarum Incarnationum Habr substituere debet et universalis solutio crucis suggestu fiere. Aliquando erunt layout adaptiva, PWA, offline modus, user customization, et multa alia interesting res.
Sit scriptor negotium
Semel, in communi stropha, unus anterior de quaestionibus in architectura commentariorum componentium mobilis versionis locutus est. Cum hac suggestione, parvum conventum in forma coetus psychotherapiae constituimus. Omnes se vertit, dicentes, ubi dolet, omnia in charta memorarunt, condoluerunt, intellexerunt, praeter quod nemo plausit; Effectus erat index 20 quaestionum, ex quibus significabat Habr mobile adhuc longum et spinosum habuisse iter ad felicitatem.
Maxime sollicitus sum de efficacia resource et quod dicitur interface lenis. Quotidie, in itinere "domus-laboris", vetus telephonum meum vidi perdite conatur ut 20 headlines in feed ostenderet. Visum est aliquid simile hoc;
Mobile Habr interface ante refactoring
Quid hic agitur? Denique, server paginam HTML similiter omnibus ministravit, sive usoris initium sive non. Tunc client JS oneratur et petit notitias necessarias iterum, sed hoc tempus pro concessione adaptatum. Hoc est, idem officium bis actu fecimus. Interface concutiebatur, et usor extra kilobytes bona centum recepta est. In singulis, omnia etiam magis creepy vidi.
Vetus SSR-CSR schema. LICENTIA solum possibilis est per gradus C3 et C4, cum Node JS non est occupatus HTML generans et petitiones procuratorium API potest.
Nostra architectura illius temporis accuratissime ab uno e usoribus Habr descripta fuit:
Versio mobilis est crap. Dico simile est. Coniunctio horrenda SSR una cum CSR.
Hoc fateri coacti sumus, quamvis triste fuit.
Optiones aestimavi, tesseram in Jira creavi cum descriptione in plano "nunc malum est, bene fac" et munus in latis ictibus resolutum est:
- reuse data;
- numerum redraws magna;
- duplicata petitiones tribue;
- processus loading ut manifestius.
Sit scriptor notitia ad reuse
In speculativis servientis inde translatio ad duas difficultates solvendas destinatur: limitationes investigationis machinarum non dolere in verbis ac meliorem metrics (Necesse peiorationem ). In classic sem ut tandem annus (retro in Backbone.js), SSR est eadem applicationis isomorphica JS currens in ambitu Node. Servo simpliciter reddit propositum genitum sicut responsio ad petitionem. Tunc rehydratio in parte clientis occurrit, et tunc omnia opera sine pagina reloadunt. Nam Habr, sicut multae aliae facultates cum textu contento, ministri reddendi elementum criticum est in aedificandis relationibus cum machinationibus quaesitis.
Non obstante quod plus quam sex anni elapsi technologiae apparuerunt, et per hoc tempus multa aqua sub ponte in mundo anteriori transiit, multae tincidunt haec idea adhuc in occulto obducta est. Vue applicatione cum SSR productionis subsidio non destitimus et evolvit, una minutissima particula defuit: non ad clientelam statum initialem transivimus.
Quare? Huic quaestioni non est exacta responsio. Aut magnitudinem responsionis ministrantis augere aut propter fasciculum quaestionum architecturae noluerunt aut modo non distulit. Uno modo vel alio, eiectis rem publicam et incusans omnia, quae ministrans fecit, satis opportunum et utile videtur. Leve negotium est. in contextu exsecutionis, et Vue automatice eam in layout generati velut variabilis globali addit: window.__INITIAL_STATE__.
Una orta problematum est non posse structuras cyclicas in JSON converti.); Soluta est simpliciter reponens huiusmodi structuras cum planis versos.
Insuper cum contento UGC tractantes memineris notitias ad HTML convertendas esse ne HTML frangerent. Ad haec utimur .
Minima redraws
Ut videre potes ex schemate supra, in nostro casu, una Node JS instantia duo munera exercet: SSR et "procurator" in API, ubi auctoritas usoris occurrit. Haec circumstantia permittere non potest dum JS code currit in calculonis, cum nodi unus-filam habet, et munus SSR synchronum est. Id est, ministrans solum petitiones sibi mittere non potest, dum callis in re aliqua occupatum est. Contigit ut rempublicam renovaret, sed interface non cessavit vellicare, quia notitia in cliente habita ratione sessionis usoris renovanda erat. Applicationem nostram docere oportuit ut rectas notitias in statu initiali poneret, ratione usoris usoris.
Problematis solutiones duae tantum erant:
- data auctoritate link to cross-server requests;
- Discidium Node JS in duobus instantiis separatis.
Prima solutio usum variabilium globalium ministrantium requirebat, et secunda tempus prorogavit ad munus perficiendum saltem per mensem.
Quomodo eligendi? Habr saepe per semitam minimae resistentiae. Intime, generale desiderium est reducere cyclum ab idea ad prototypum ad minimum. Exemplar habitus erga productum paulo simile postulatorum booking.com est, cum sola differentia sit quod Habr opiniones usoris multo gravius accipit et eiusmodi decisiones tibi tamquam viae commendat.
Hanc logicam sequens et desiderium meum celeriter solvendi problema, global variabiles delegi. Et, ut saepe fit, citius vel serius illis solvenda est. Paene statim solvimus: in volutpat vestibulum laboravimus, consectaria expedivimus, scripsimus servo in duas partes dividere coepit. Error valde stultus erat, et cimex quod involvit, non facile est effingere. Et sic, pudor est huius, sed aliter atque aliter, scandalum et gemitus, mea PoC cum global variantibus tamen in productionem venit et satis feliciter laborat dum motum ad novam "duplicem nodum" architecturam exspectans. Hoc magni momenti fuit, quod formaliter propositum est consecutum - SSR didicit paginam perfectam ad usum paginae tradere, et UI multo lenior factus est.
Mobile Habr interface post primum gradum refactoring
Postremo SSR-CSR architectura mobilis versionis ad sequentem imaginem ducit:
"Duo-nodi" SSR-CSR circuitus est. Nodus JS API semper asynchrono I/O paratus est et functione SSR non impeditur, quoniam haec in casu separata sita est. Quaestio catenae #3 non indiget.
Duplicata petitiones subtrahas
Postquam machinationes peractae sunt, initialis paginae redditio comitialem morbum iam non provocavit. Sed ulterior usus modus Habr in SPA adhuc confusionem attulit.
Cum ex usuario fluxus est transitus formae index articulorum → articulus → comment et e contrario maximus fuit subsidiorum sumptionem huius catenae imprimis optimize.
Reversus ad postes triggers nova postulatio data
Fodere altum non erat. In screencast supra te videre potes applicationem re-petitionum indicem articulorum cum relabi, et in petitione articulorum non videmus, quod significat praecedens notitia alicubi evanescere. Articulus album spectat sicut componentia locali utitur statu et amittit ut destruat. Re quidem vera, applicatio ad rem publicam adhibita globalis usus est, sed Vuex architectura in capite aedificata est: moduli ad paginas ligantur, qui in vicem itineribus ligantur. Omnes autem moduli "unum tempus" sunt - singuli sequentes ad paginam totius moduli rescripserunt:
ArticlesList: [
{ Article1 },
...
],
PageArticle: { ArticleFull1 },
In summa habuimus moduli ArticlesList, quod continet objecta type articulus et modulus PageArticlequod erat objecti versio extensa articulus, genus Article Full. Per et ampla, haec exsecutio nihil terribile in se fert - est valde simplex, etiam rusticum dici potest, sed perquam intellegibile. Si modulus reponis quotienscumque iter mutas, tunc etiam cum eo vivere potes. Sed transitus inter articulum feeds, e.g /ale → /allpraestatur abicere omnia quae ad cibarium personalem spectantur, cum unum tantum habeamus ArticlesListin quas novas notitias imponere debes. Hoc rursus nos ducit ad petitionum duplicationem.
Collectis omnibus, quae in rem fodiendam curavi, novam institui structuram ac collegis meis exhibui. Disceptationes erant prolixae, in fine rationes in favorem dubia praeponderant, et exsequendum incepi.
Logica decisionis maxime declaratur in duobus gradibus. Primum conamur Vuex moduli e paginis eliminare et ad vias directe ligare. Etiam paulo plus notitiae in copia erunt, getters paulo implicatiores fient, sed articulos bis non oneremus. Nam versio mobilis, hoc fortassis argumentum validissimum est. Videbit aliquid simile hoc;
ArticlesList: {
ROUTE_FEED: [
{ Article1 },
...
],
ROUTE_ALL: [
{ Article2 },
...
],
}
Sed quid si schedae capitulorum inter multiplices vias et quid, si volumus quod notitia rei reuse possumus? articulus post- paginam reddere, eam in vertere Article Full? Hoc in casu, magis logicum esset tali structura uti;
ArticlesIds: {
ROUTE_FEED: [ '1', ... ],
ROUTE_ALL: [ '1', '2', ... ],
},
ArticlesList: {
'1': { Article1 },
'2': { Article2 },
...
}
ArticlesList hic est quaedam repositio articulorum. Omnia vasa quae in sessione usoris receptae sunt. Eas diligentissime tractamus, quia hoc negotium est, quod alicubi in metro inter stationes receptae sunt, et certo nolumus hunc dolorem usori iterum facere, cogendo eum onerare notitias quas iam acceperat. . objectum ArticlesIds est simpliciter ordinata IDs (sicut "nexiones") ad objecta articulus. Haec structura te permittit vitare duplicationem notitiarum communium ad itinera et objectum reusing articulus cum paginam post paginam reddito in eam datam extensis bus.
Expositio indices articulorum etiam magis perspicua facta est: iterator componentium per ordinem cum articulo IDs iterat et articulum componentium teaser trahit, transiens ID ut columen, et puer componentia necessarias notitias vicissim recuperat. ArticlesList. Cum ad paginam publicationis venies, diem exsistentem recuperamus ArticlesListrogamus ut notitia absentis recipiatur et rem exsistenti simpliciter augeat.
Quorsum accessio melior? Quemadmodum supra scripsimus, accessio haec diligentior est de notitia receptae et permittit te ad eam reuse. Sed praeter hoc, ad aliquas novas facultates, quae ad talem architecturam perfecte accommodantur, aperit. Exempli gratia: datorum et onerantium articulorum in feed ut apparent. Possumus simpliciter pone tardus nuntia in "repono" ArticlesList, nisi indicem separatum novorum IDs in ArticlesIds et de hoc usore certiorem facias. Cum deprimendo in "Novas publicationes" conjunctionem ostendemus, simpliciter novas IDs inseremus in initio instrumentorum in apparatu hodiernae instrumentorum et omnia fere magice operabuntur.
Faciens jucundiorem downloading
Vico in placenta refactoris conceptus sceletorum est, quae processum loading contentorum lento penitus paulo minus frustrante facit. De hac re nullae disputationes fuerunt: via ab idea ad exemplar duarum horarum ad litteram sumenda est. Consilium prope se traxit, et partes nostras docuimus reddere simplices, vix micantes cuneos, dum notitias exspectant. Subiective, hic aditus ad onerandas etiam quantitatem hormonum accentus in corpore usoris minuit. Osseus hoc spectat:
Habraloading
Cogitans
In Habr sex mensibus laboravi et amici mei adhuc rogaverunt: bene, quomodo ibi eam amo? Bene, consolatoria - ita. Sed aliquid est quod hoc officium seorsum ab aliis ponit. Laboravi in iugis quae eorum productum omnino neglegit, non sciverunt aut intellexerunt quinam essent usores eorum. Sed hic omnia alia sunt. Hic tu sentis quid agis. In processu evolutionis plumae, ex parte dominus eius fies, interesse in omnibus conventibus productis ad munus tuum pertinentibus, suggerere et te ipsum decernere. Faciens opus quod uteris cotidie te ipsum frigidissimum est, et scribens codicem hominibus qui probabiliter melius intellegunt quam tu incredibilis est sensus (non cavillatio).
Post emissionem omnium horum mutationum, opiniones positivas recepimus, et valde grata erat. Inspirante. Gratias tibi! Plura scribere.
Me moneam te post variabiles globales variabiles architecturae mutare decrevimus et procuratorem tabulatum in singularem instantia collocare. Architectura "dua-nodi" iam dimisit in forma betae publicae probationis. Nunc quis ad eam flectere potest et adiuva nos ut mobilem Habr meliorem faciamus. Id hodie omnia. Laetus ero in commentaria tua respondere ad omnia quaesita.
Source: www.habr.com