Jump to content
php.lv forumi

Redux + Webpacks + react hot reloader


codez

Recommended Posts

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. 

Link to comment
Share on other sites

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 by codez
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by codez
Link to comment
Share on other sites

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 by Wuu
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • 4 weeks later...

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

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