reactjs - how to manage a big React/Redux project with many independent widgets -


i want have project structure that:

./app/package.json ./app/src/index.js  ./widget1/package.json ./widget1/src/index.js  ./widget2/package.json ./widget2/src/index.js  ./widget3/package.json ./widget3/src/index.js

as can guess, project aggregation of npm widget subprojects, , app src folder real app, uses different widget subprojects.

i want clear , strict separation between widgets because current experience shows me developers tend introduce unwanted cyclic dependencies between widgets if tell them not too.

in practice, these widgets reactjs widgets have of them 3 common js libs: react, jquery , lodash. not need these 3 libs, need additional lib packery, react-slick or react-date-picker these widgets should share common test libraries mocha. absolutly need share exact same common library versions (because don't want different versions of react in project nor increase bundle size).

for example, - widget1 datepicker widget, depends on react + lodash + react-date-picker (npm lib, not mine) - app project depend on react + redux + normalizr + widgets , transitive dependencies react-date-picker

all widgets presentational components , not need more fancy dependencies. depend on react. may have redux reducer plain old js code, there's no dependency needed.

the number of widgets can quite big , don't want edit 200 package.json files on each library update (however use code handle that).

when inside widget1/src, should forbidden require code widget2. if widget had able depend on widget, dependency must set explicitly in package.json of client widget.

i should able build webpack , test widgets independently. should able build , test @ once whole project, including subprojects, , having single aggregated global test , code coverage report.

i don't want have bad developer experience. react , webpack permits have hot code reloading. if have real app in browser , modify code of widget, should able see change live react-hot-loader , not have run npm commands nor hit f5.

what equivalent of java maven's dependencymanagement system set versions subprojects in parent pom, , versions somehow inherited child projects. child projects cannot see each others (unless explicit dependency added), can depend on library declared in parent project. lib version numbers can set in parent project.

is possible npm , webpack?

or @ least close it?

thanks

you put each widget in it's own git repo , install them npm via repo url. long each widget defines libraries use in own npm package, when they're used in main project npm handle of dependencies you.

depending on size of team sign npm's private packages , host them there https://www.npmjs.com/npm/private-packages


Comments

Post a Comment

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

i have ec2 instance mongodb 3.2.0 installed. have user admin access. can connect user , perform operation remotely. 1 can connect database test remote if knows ip mongo 11.11.11.11. although not able make operations, want restrict access user credentials can connect server. first need create users , grant roles users, example: use admin db.createuser( { user: "myuseradmin", pwd: "abc123", roles: [ { role: "useradminanydatabase", db: "admin" } ] } ) then need start server --auth parameter mongod --auth more information here
Read more

r - Update two sets of radiobuttons reactively - shiny -

i have read ( how make choices in radiobuttons reactive in shiny? ) shows me how update radiobutton s in reactive way. however, when try , update 2 sets of buttons same data, 1 set renders. example: server: # create example data wafer <- rep(c(1:3), each=3) length <- c(1,1,2,1,1,1,3,5,1) width <- c(3,1,6,1,1,1,1,1,6) dd <- data.frame(wafer, length, width) shinyserver(function(input, output, session){ # create reactive dataframe store data values <- reactivevalues() values$df <- data.frame() # lengths , widths of wafer user input <- eventreactive(input$do, { subset(dd, wafer %in% input$wafer, select = length:width) }) # update reactive data frame lengths , widths have been selected user input observe({ if(!is.null(a())) { values$df <- rbind(isolate(values$df), a()) } }) output$wl <- renderdatatable({ a() }) # update radio buttons unique length , widths stored in values$df # ever "observe" put first in co...
Read more

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -

i'm working on app using core data , nsfetchedresultcontroller many reasons switch use realm. saw there "realm version" of nsfetchedresultcontroller on github wouldn't compatible current code using core data. the view controller displaying list of people same school, address book. list sublist of people studied in same city. so thinking make 1 unique request database retrieve list of people , filter locally list within 1 dictionary per school [string: anyobject] string section name within tableview , anyobject array of people. first solution, make nsfetchedresultcontroller each school predicate filtering location. delete actions etc.. handled delegates -> not compatible realm create dictionaries , update them each actions... -> works realm it's annoying code. any better solution? edit: i need clarify request: i'd write class inherit uitableviewcontroller. this class has list of people sorted in alphabetical order the tableview has ...
Read more