Jump to content
php.lv forumi

Angularjs vai Backbonejs vai ko citu?


Wuu

Recommended Posts

Šobrīd izstrādāju dinamiskas programmas. Vienkārši dzenāju JSON un ar jQuery apstrādāju. Pieredze aug, un prasība arī. Jūtu ka ar jQuery vairs netiek galā, lai ērti un ātri veidotu dinamiskas aplikācijas. Servera puse atkosta, ātrums pietiek. Tik klienta pusē, pasmagi ar koda daudzumu! Vēlos dzirdēt ieteikumus!

Link to comment
Share on other sites

  • Replies 51
  • Created
  • Last Reply

Top Posters In This Topic

React pamatā - tas ir standarts, kurš tik drīz nepazudīs, jo visas iepriekšējās UI veidošanas metodes padara nenozīmīgas.

Aplikāciju var organizēt dažādos veidos, populārākais ir ar Flux paternu, piemēram, Reflux ar, piemēram, react-router.

Es izmatoju kaut ko līdzīgu refluxam, tikai visu informācijas plūsmu organizēju ar FRP veidā ar plūsmām. Es izmantoju savu plūsmu implementāciju, bet var izmantot kādu gatavu, piem., Bacon.js, (piemērs)

 

Pateicoties React addon-am update datu modelim ļoti labi der plain javascript datu struktūras. Ja nepatīk vai neapmierina React update funkcionalitāte, var izmantot Immutable.js vai Cortext

Edited by codez
Link to comment
Share on other sites

Lipināt dinamiskas aplikācijas ar jquery ir murgs. Labi, ka tie laiki garām.

Backbone liekas primitīvs. Varbūt kā papildinājums citam, nopietnākam rīkam, bet pats par sevi kaut kā neuzrunā.

Angular - no sākuma liekas ūber tūber labs, bet pēc laika sapratu, ka tas tomēr smagi atpaliek no React struktūras.

Tāpēc vēl viens +1 par React.

 

Tiesa gan man neizdevās iebraukt flux arhitektūrā.

Manās aplikācijas datu slānis ir primitīvs. Piemēram, man ir saraksts ar produktiem un apakšā poga "Load more". Tad tai pogai ir onClick handleris, kas ar jquery veic AJAX pieprasījumu uz serveri. Saņem JSON un ievada sarakstā ar this.setState().

Tiesa gan, komponenti mēdz kļūt ļoti apjomīgi. Sarežģīta interfeisa komponents var būt pat uz kādām 400-500 rindām, ar daudzām metodēm un īsu render() funkciju. Domāju ka tas nav pārāk labi un fluxs to laikam risina datu saņemšanas metodes pārvietojot uz Store ?

 

Gan jau codez var precizēt. Citādi es turpināšu rakstīt garum garus komponentus, liekas ka darbojas tāpat. :D

Edited by qwerty
Link to comment
Share on other sites

React, ja tā var teikt ir vēl ļoti jauns un vēl nav visām situācijām atlasījušies labākie risinājumu paterni.

Ja komponente ir pilnīgi neatkarīga, es arī lieku ajax request-us pašā komponentē.

Ja tas ir kaut kas globālākās, tad kāda moduļa actionā, kurš ir stream-s (piem. Bacon.Bus), kurš pieslēgts pie cita stream-a, kas ir store.

Respektīvi manā frp pielietotajā paternā store no action-iem ne ar ko neatšķiras, tie abi ir plūsmas.

 

Šeit primitīvs piemērs ar Baconjs plūsmām un globāliem actioniem un storēm:

http://jsfiddle.net/d9crpzqy/1/

 

P.S.

Modelēt stores kā plūsmas ir forši, tas ļauj ar tām veidot visdažādākās transformācijas - ekstraktēt datus, filtrēt, pārveidot, utt.

Šeit iepriekšējais piemērs ar papildinājumu, kurā ir otra store, kas atkarīga no pirmās caur filter un map funkciju.

http://jsfiddle.net/d9crpzqy/2/

Protams reālā izstrādē plūsmas pie react komponentes state tiek pieslēgtas ar vienu mixin rindiņu, nevis manuāli.

 

Facebook taisās nāk klajā ar savu Relay un GraphQL, kas ļaus vispār iztikt ar vienu centrālu stori un vienu ajax requesta endpointu:

https://facebook.github.io/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html

Edited by codez
Link to comment
Share on other sites

Es gribētu redzēt kaut ko Reactā rakstītu, kas nav galīgi primitīvi un basic līmenī, codez vai dagrevis izpildījumā.

I mean - nesen bija php uzdevumi. Tagad varētu uztaisīt tādu pašu priekš React. Vai Angular.

 

Jāpublicē githubā un kaut kur live demo.

 

Pirmais kas man ienāca prātā - spēle "kuģīši". You know, 10x10 laukums, vienā malā cipari 1-10, otrā burti "kartupelis". Appa piedāvātu sākumā ar dragndroppu izvietot kuģus uz laukuma (grozīt utt).

 

Varētu sadalīt ekrānu divās daļās - kreisajā pusē viens laukums un labajā otrs. Serveri nevajag, varētu no-mockot.

 

Kā šauj uz pretinieku, tā parādās vai trāpīts vai garām.

 

etc..

Link to comment
Share on other sites

Papētīju, izskatās ka React derēs.

 

Papildus jautājums, vai man tiešām nepieciešams kaut kas papildus datu dzenāšanai starp serveri un JS? Nu pēc paša pieredzes JSON's ir prast kā akmens un nekad nav sagādājis problēma to apstrādāt.

Link to comment
Share on other sites

React state ceļo pa koku, uz leju.

 

Ja tev vajag komponentā List pamainīt state, tu to dari no tā paša komponenta vai arī no jebkura komponenta, kas kokā ir zemāk.

 

Šeit piemērs ar komponentu struktūru. List state drīkst mainīt tikai pats List un List children, tobiš Item šajā gadījumā.

 

-- Root
---- Nav
---- List
------ Item
------ Item
------ Item
---- Footer
State iekš komponenta tiek mainīts ar “setState“.

 

Ja vēlies mainīt state no ārpuses, komponentiem kas ir zemāk un kuriem ir tiesības mainīt List state, caur props ir jāpadod funckija kas mainīs List state.

 

var Item = React.createClass({
  onClick: function(event) {
    this.props.changeColor("green")
  },
  render: function() {
    return <li onClick={this.onClick}>Hello from Item</li>
  }
});

var List = React.createClass({
  changeColor: function(color) {
    this.setState({color: color})
  },
  render: function() {
    return (
      <ul>
        <Item changeColor={this.changeColor} />
        <Item changeColor={this.changeColor} />
      </ul>
    )
  }
});
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...