Redux + Webpacks + react hot reloader

[codez]

Varbūt kāds jau izmanto, bet izskatās pēc diezgan laba frontend workflow-a.

 

https://github.com/rackt/redux

https://webpack.github.io/

https://github.com/gaearon/react-transform-boilerplate

 

Edited December 29, 2015 by codez

[Wuu]

Pie vēl viena "Flux" paveida, viņš mani 100% pazaudēja.

 

Un uzturēt konkrētu state ir kool, bet, iespējas mani komponentes un aplikācijas ir pārāk prastas. Bet kaut kā neredzu pielietojumi. Tupi nodifinē pie constructor, pie kāda state gribi strādā un darbojies. 

[codez]

Es piekrītu, ka dažreiz vienkāršākām aplikācijām ir vieglāk stāvokli glabāt vienkārši react komponentēs.

Bet, jo aplikācija paliek sarežģītāka un, jo vairāk dažādām komponentēm pārklājas datu kopas, ko tās izmanto, jo viss kļūst par lielāku bardaku un saglabāt kārtību stāvoklī kļūst arvien sarežģītāk, un tas prasa papildus darbu pretstatā, ja dati glabājas vienā kopējā storē.

Redux galvenā ideja ir tāda, ka actions tiek definēts kā stores transformācija, tādā veidā var panākt visās tās skaistās fīčas (time travel, undo/redo, action replay), kuras varbūt gala produktam nevajag, bet izstrādes procesu noteikti atvieglo.

Es izmēģināju Redux-u un man personīgi viņš nepatika. Actionu definēšana likās pārāk verbose. Reduxam nav atstrādāta paterna kā veidot stori ar Immutable.js

Plus esmu pieradis strādāt ar cursor-iem storē, kuri arī nav Reduxā implementēti (plus vēl kombinācijā ar Immutable.js).

Bet viss pārējais no tā video pat baigi patika - jau jaunajā projektā iekļāvu Webpacks + es6 moduļu struktūru (ar babel) + hot module reload - beidzot, tas kā tiek organizēts javascript projekts, man patīk. Visi moduļi ir īsi un kodolīgi, ir skaidri redzams, kas no kā ir atkarīgs, viss tiek automātiski sapakots kopā ar 3rd party bibliotēkām, stylšītiem, bildēm, utt. + arī visas obfucēšanas, minificēšnas, utt.

Izmaini kādu moduli, tas bez aplikācijas refrešošanas atjaunojas un uzreiz redzi izmaiņas, gan izskatā, gan funkcionalitātē.

 

P.S.:

Aptuveni šādi tagad izskatās React komponentes modulis es6 javascriptā:
 

import React, { Component } from 'react'
import actions from './actions'
import { Link } from './components/Helpers'

export default class extends Component {
  render() {
    return <div>
      <button onClick={()=>actions.doSomthing()} />
      <Link to="home" />
    </div>
  }
}

Edited January 3, 2016 by codez

[Wuu]

Intereses pēc pamēģināju, nevienā pārlūka nestrādāja, talāk neiedziļinājos. 

 

Man visa organizācija ir uzrakstīta ar gulp palīdzību, babel es6, lintings, minimizācija etc... Buildojo, pa taisno bumpoju versiju un uploadoju uz FTP ar vienu komandu, ja testi veiksmīgi. Tā nav nekādā Amerika, gribi teikti pirmo reizi kaut ko tādu redzi? Īsti nesaprotu.

 

Par Redux runājot, pirms tam lietoju Reflux, bet tas neatbalstīja ES6, nācās atteikties. (Šobrīd tiek veidots Airflux, tas būšot ok) Paspēju pats savu, Flux implementāciju uzrakstīt, beigās sapratu ka man neko tik sarežģītu nevajag. Tupi atdalu izsaukumu loģiku citā klasē, un pie React komponenta piekabinu. Sanāk mini Flux paterns, nav bijis vajadzība, ne pēc kā lielāka.

[codez]

Gulp pēc būtības ir task menidžeris, viņam nav nojausma par projekta struktūru un dependencijiem, visas projekta dependencijas ir jākonfigurē. Gulp nevar viens pats nodrošināt viena moduļa ielādi pēc tā izmaiņām, jo viņam nav nojausma par projekta struktūru. Ja gulp ir task menidžeris, tad webpack ir projekta menidžeris.

 

Topiks vairāk ir par tendencēm forntend izstrādē.

Gribi teikt, ka esi agrāk izmantojis workflowu, kurā tu pārlūkā savā app-ā izdari pāris darbības, tās tiek ielogotas, izmaini kāda moduļa kodu, tas tiek automātiski ielādēts un pirms tam izdarītās darbības automātiski tiek izdarītas vēlreiz uz jaunā koda un tu redzi jauno rezultātu, kāds tas izskatās ar iepriekš veiktajām darbībām un redzi visu ceļu kā mainās app-a stāvoklis pēc katras darbības?

Kaut vai video parādītais piemērs ar counteri, kurā ir React komponente, kurai ir stāvoklis un funkcija, kas šo stāvokli maina. Tu izmaini šo funkciju, kura maina stāvokli, saglabā un "hot module reloadings" ielādē tev jauno react komponenti, pie tam saglabājot tās iepriekšējo stāvokli un atjaunojot tikai funkciju, kas maina šo stāvokli. Nedomāju, ka tavā aprakstītājā workflof-ā un rīkos kas tāds ir iespējams.

Edited January 3, 2016 by codez

[briedis]

Google inbox vienkārši - apakšā parāda mazu paziņojumu - ir iznākusi jaunāka versija, pārlādējiet lapu :)

[Wuu]

codez, protams ka nē, vienmēr pilna pārlāde. Es ticu ka tas nav pareizais variants. Bet man projekti ir vienmēr stipri mazi, un īsti nav bijusi vajadzība. Nestrādāju pie user/blog/sociāla satura, bet programmām ar specifiskiem uzdevumiem. 

 

Ieliec githubā, ja var padalīties. Ja tu esi jau salicis, ar visiem css, html, statiskajiem failiem, kur galā var dabūt pilnu clienta buildu. Man nestrādā oriģinālais variants. (Lūdzu?)

Edited January 3, 2016 by Wuu

[codez]

Man no šiem piemēriem todos-with-undo un counter piemērs strādā (pārējos nemēģināju):

https://github.com/rackt/redux/tree/master/examples

Edited January 3, 2016 by codez

[Wuu]

Nestrādā, ar 3 pārlūkiem pamēģināju. Issue sarakstā ar cilvēki saka ka nestrādā. Bet par strādāšanu, readme.md, ar nekas netiek solīts.

[codez]

git clone https://github.com/rackt/redux.git

cd redux/examples/todos-with-undo

npm install

npm start

un pārbaudi http://localhost:3000

[Wuu]

No manas puses saliku sev dev pasākumu uz webpakas + react-transform-hmr, kas bāzējas no tā demo. Izravēju visus Redux mēslus, imho, nošaujiet kaut ko tādu lietot.

Pievienoju style-loader, css-loader lai css ar pārlādējas. Un protams gulpu, build procesam, smieklīgi viegli ar gulp-webpack.

 

Beigās sanāca daudz ērtāks/ātrāks pasākums, react izstrādei. 

[codez]

Kāds ir iemesls izmantot gulpu? Manuprāt, webpack pilnībā pārklāj gulp-a funkcionalitāti. Ja nu vienīgi pierasts un ir labākas zināšanas kā to konfigurēt.

[Kavacky]

... jo natīvi nāk līdzi Laravelam? :)

[Wuu]

Kāds ir iemesls izmantot gulpu? Manuprāt, webpack pilnībā pārklāj gulp-a funkcionalitāti. Ja nu vienīgi pierasts un ir labākas zināšanas kā to konfigurēt.

 

Nezinu, pierasts :D Aizvācu.

[Wuu]

Patestēju ilgāku laiku un teikšu ka nekas labs nesanāk. Vienkārši, ja strādā ar gataviem API un pārsvarā tikai ar render() attēlošanu, tad der un ir ērti.

Bet būsim reāli, tas ir stipri šaurs pielietošanas veids. Pats paralēli , gan frontendu, gan API rakstu, neiet kopā, beigās sanāk ka F5 biežāk jāspaida, nekā vajag.

Un ja javascript kļūda iziet caur kompilatoru, tad grūti saprast kur vaina, citriez ar F5 kļūda pazūd, lieks laiks patērēts.

 

Būs laiks, būs jāpieskrūvē slēdzis, kurš ļauj pārslēgties no hot reload uz pilnu pārlādi un atpakaļ.