Angularjs vai Backbonejs vai ko citu?

[Wuu]

Š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!

[Kavacky]

React.

[Kasspars]

React ir atbildīgs tikai par DOM. Lai dzenātu datus no severa uz klientu un atpakaļ vari droši izmantot Bacbone modeļus un kolekcijas

[codez]

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 May 8, 2015 by codez

[ergocom]

Ember Js http://emberjs.com/

 

CanJS http://canjs.com/

 

Polymer https://www.polymer-project.org

 

Seit vairak http://todomvc.com/

[qwerty]

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 May 8, 2015 by qwerty

[daGrevis]

+1 par React.

[codez]

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 May 8, 2015 by codez

[qwerty]

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..

[Wuu]

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.

[Kaklz]

Jāc ar AJAX/JSON, kad ieskriesi ar galvu sienā, tad arī domāsi. 

[Wuu]

Kā man no vienas React klases nomainīt "state" citai React klasei?

[codez]

Katra komponente pati maina savus "state". Bet, ja gribi padot kādu ziņu, tad ar props padod callback eventu.

[Wuu]

Props pamatā ir statiskas vērtības. Var piemēru?

 

Kā man no vienas klases uztaisīt setState() citai klasei!

[daGrevis]

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>
    )
  }
});