I'm really hoping to see the React team make React more user friendly. Maybe an all in one React framework much like Meteor, where you can just do `react createapp myapp` or something and start coding right away.
React is so versatile (raw React, React + Redux, React + Relay, to name a few) I don't think they should tie it too closely to one framework. I would love to see a more official/opinionated framework that uses React, but call it something besides "React".
Ditto for Redux. They're both low-level building blocks that could benefit from some official "opinions".
This is lacking tons of features that other boilerplates already have but I think this was a great move because we needed a source of truth for doing app structure in React.
In a different note, I think if you write it yourself from scratch you'll have more control and knowledge down the road when it comes to nasty bugs but I won't blame you for choosing this over spending weeks setting up a React app.
I think it's the right move for people new to React. A lot of those features in other boilerplates aren't really necessary for building out a simple app.
If you work with React a lot, you can setup a React project to your taste in about 30 minutes. But the catch being if you leave React for a while then come back, all bets are off.
I think most boilerplates add way too much and are overly opinionated. I like that this is simple, and "eject" gives power users an even better starting point.
Totally. My first React setup took me two days to get right. Now, starting a new project is a 5 minute exercise in CLI autocomplete that has me wishing npmjs downloads were faster. It's surreal to think that for any popular technology, there will always be newcomers, no matter how long that technology has been around. I would write up my process in a blog post, but I'm sure that that has already been written several times.
Going back over my old projects and finding four different flux implementations, that is a new and interesting kind of suffering. The crazy thing is, I never even liked flux in any of its forms. What I really want, is pouchdb / couchdb, but even that is not perfect, and my team has no problem poking holes in weird ideas.
Right now, I'm going through the Om.next tut series, and it is pretty awesome so far. I think I'm going to pass on datascript, though. This is total skunkworks though, if people at work found out that was using clojurescript on the front end, they would be very concerned about me.
The killer feature for Om.next, imo, is using a reader function to define the relationship between a component and the one application state atom. Combine that with an identifying function that associates a component with a field in the application state, and you enable the framework to make very precise component updates.
The problem is not really being overly opinionated. It's being unnecessarily opinionated.
React Starter Kit comes with GraphQL as its API layer. I love GraphQL, and have written tons of it when writing Relay code, but I wouldn't ever expect someone getting up to speed on React to use it.
You have to limit the number of things you throw at newcomers.
This is great. React has this weird dual nature in that on one hand, you can drop it in as a <script> tag and it 'just works'. On the other hand, if you want to build using it, you're going to end up needing things like webpack, babel, etc, not to mention other common libraries, to the extent that it takes over your front-end stack (also because it takes over any rendered document nodes, and if you want to build a SPA you eventually use it to render everything inside <body> if not the whole document). So it's good to resolve this conflict by providing quicker ways to get started with common tools.
This is all I ever want in a React boilerplate, but everyone feels the need to throw a bunch of random shit into them that others probably do not even want. Glad they kept it sane and simple.
In all fairness, I think that flags that provide some basic bootstrapping for Redux and/or React-Router would be very spiffy - those tools are useful for many React applications.
I think Redux and React-Router are very opinionated and distract people new to React from React itself.
My workflow for ramping someone up on React and eventually Redux looked like:
- A single React component with React.createClass
- ES6 class React components
- Add a component hierarchy and treat the top level
component's state as the entire app state - pass down callbacks to update state. Look how this becomes harder to scale as we get more depth in our component hierarchy!
- Redux without the redux-react bindings. Also stateless function components.
I agree. That's why I would put them behind flags. Even though most of my own projects wind up using them, I tend to start from a clean slate and apply things only as they become relevant.
As someone not new to React, I'm seeing this tool as a solid replacement to the old JSX Transformer script they used to provide. Let me get up and running just a bit more quickly.
What’s wrong with using webpack under the hood? The problem is webpack being a lower level tool. This is why we abstract it away from you (and we can swap it for something better if it comes along, but actually webpack is pretty powerful).
As I think I said on Twitter - it's not really that I think something solves the same problems better; it's that one tool shouldn't be solving all those problems (and in fact many of those problems aren't in the JS space at all).
Sort of... think UNIX philosophy vs... I dunno, Windows I guess? With the way it currently does it you are always going to have a horrible public API because the approach is fundamentally flawed.
And that's before I even get into how it solves those problems.
Now is it a bad thing it exists? No, obviously not. I'm glad it does, but we can learn what not to do from it as well.
The only practical reason I can think of for people railing against grunt is that it used the file system for in-between steps and was thus frustratingly slow (a problem that webpack doesn't have).
If you don't care about the stupid arbitrary bundling system for other assets (like CSS and images) that WebPack has (and you shouldn't: it's an awful code practice) then yes... Browserify is literally better in every way (other than tree shaking)
>If you don't care about the stupid arbitrary bundling system for other assets (like CSS and images) that WebPack has (and you shouldn't: it's an awful code practice)
The “stupid arbitrary” system has a number of benefits. It revs your assets for production automatically with content hashes. It saves you from filename typos because all assets (CSS, images) are part of the same build pipeline. It throws on parse errors in CSS as part of your normal dev flow, not at some later stage. It allows for fast hot reloading of styles in development.
The only downside I’m aware of is that it doesn’t work with some other tools without special plugins or configuration. Well, you have to pick your tradeoffs, right? I’d love to talk about technical tradeoffs of both systems but your comment reads more like a knee-jerk reaction than a technical assessment.
> The “stupid arbitrary” system has a number of benefits.
Yes, it does. Those features aren't exclusive to webpack though (they're really, really, really old features of webdev) and can be replaced by much less silly systems.
I mean literally everything you just listed is better handled by more mature, developed, tools.
Many people (especially beginners) appreciate automatic updates of their dependencies. If you eject straight away you’ll have to manage them yourself, which is a big turnoff to many.
> Couldn't they just offer a "facebook-certified" starter pack/bootstrap?
No, because Facebook engineers don't use or need that. Facebook only open sources or releases stuff they use—except for this. This is actually the first and probably only open source project from Facebook that they don't use in production.
Definitely a great way to lower the barrier to entry. The eject feature is sweet since it removes the risk of lock in. Looking forward to integrated unit testing libraries in a future release. While you're at it let's add redux. :)
This is really great! However, I think this speaks to the need for a better API in general for this sort of stuff.
At the moment it's "all or nothing" in that you can decide to let everything be configured, or nothing be configured ("ejecting"). This makes perfect sense, but I think a more ideal solution would be having layers of configurability that let you more gracefully set your preferences without completely abandoning this tool's utility.
I'm not saying that's easy, but it's a direction I'd be excited to see.
I’d love that to be possible but “all or nothing” is useful as a forcing function for us to choose great defaults. We might want to relax it a little someday, but doing it too early will harm the project.
Sane defaults and pieces made to go together are critical to lowering the adoption barrier and building a community, so huge props for that. But no ability to configure anything at all? I think that for most people, at some point there will be some small change to the default configuration their environment will require[1], and that means they'll need to jettison the entire project. It's nice that this is easy to do, but it would be better if it weren't necessary.
[1]: For example, I run my app from within a Vagrant Virtualbox machine that doesn't forward filesystem notifications correctly, so I have to configure Webpack's hot reloader to poll for changes instead of listening for fs events.
> “Ejecting” lets you leave the comfort of Create React App setup at any time. You run a single command, and all the build dependencies, configs, and scripts are moved right into your project. At this point you can customize everything you want, but effectively you are forking our configuration and going your own way. If you’re experienced with build tooling and prefer to fine-tune everything to your taste, this lets you use Create React App as a boilerplate generator.
We’ll start with extremes (no config vs all config is yours) and see how people use it. Perhaps we’ll add some configuration later but if we do it too early, we might as well become another webpack.
Configuration makes it very hard to move forward or swap underlying tools. So we’ll stick with no configuration for as long as we can, and try to figure out a way to solve common problems by other means (e.g. smarter detection, platform-specific code, etc).
If a person knows enough to want to configure, then they have learned enough to venture out on their own via eject.
The difference in cognitive load between "zero config" and "some config" is enormous.
"zero configuration" === minimal mental model, no scope for misunderstandings, misconfigurations, minimal documentation, almost no scope for user errors and also minimal learning time
"some configuration" - even one single switch/option === learning the mental model, understanding, version problems with the old way of configuring, documentation of configuration, potential for errors, old & out of date blog posts on the Internt telling how to do it the old way, beginner pain
You will come under constant pressure from people who want to add "just this one teensy option" and will criticize the project for not having it. Resist the criticism - beginners need zero config.
The root of all evil in JavaScript development and build systems is configuration.
It doesn't even support hot reloading. No config means they can make assumptions about how things work which makes it really to share solutions for things like "optimize this for prod" or other use cases that are typically a lot of work for your custom setup.
However, I predict that there will be a softer escape hatch than "eject". At least a single option to take the webpack and config and whatever you want with it, at your own peril. This would be completely unnecessary unless you really Know What You're Doing.
The important thing is that new users need a zero configuration way in to the technology.
Once you have done some coding, found your feet and stepped up a few levels of comfort and understanding, then sure thing, start venturing out into the world of configuration via "eject".
I think it's a good thing that it is pure zero configuration. If you want to configure then you have graduated.
> Some features, such as testing, are currently missing. This is an intentional limitation, and we recognize it might not work for everybody.
With Ember CLI you get a great testing setup with Qunit. While I prefer Mocha over Qunit, I'm at least glad that testing is a first class citizen in the CLI.
> Having just attended EmberCamp a week ago, I was excited about Ember CLI. Ember users have a great “getting started” experience thanks to a curated set of tools united under a single command-line interface.
This is one of the best things about Ember. `ember new`, `ember serve`, ember generate component my-component`, `ember build`, `ember deploy`, `ember install`. It's opinionated but it lets you get productive right off the bat. I tried React but after a couple of days I just couldn't get it working, waaay to many options. So I switched to Ember and haven't looked back.
Kind of interesting to think about the two projects and how they diverge based on the core developers.
Ember is made by folks who work on / for small and medium companies[1]. They don't have the build infrastructure Facebook does and are able to create an anointed solution in Ember-CLI because they'll use it daily. React is stuck in a place where the environment it's developed in is unique from what any other user will see. It's difficult to solve a problem when you're not in the space.
EDIT:
This leads to things beyond CLIs too. React is still billed as just a view library instead of a solution for building an entire app. There's no official path from view layer -> complete app (no guidance for data flow, how to communicate with the server, server side rendering, routing on the client).
I think the React team needs to take a little more responsibility for the eco-system it created. You can't call it just a view library when most use cases use it to develop entire applications. You have to provide more guidance, you can't fallback to Facebook not using it that way as the default response. In my opinion most of the Great Javascript Fatigue of 2015-16 was caused by users trying to fill in the blanks left by the React team and producing one solution after another (and quickly abandoning ship as something iteratively better was released).
We think React is a tool to create great UIs, and UIs definitely include concerns like data fetching, etc. So some of this might make it into React in some form in the future.
> In my opinion most of the Great Javascript Fatigue of 2015-16 was caused by users trying to fill in the blanks left by the React team and producing one solution after another (and quickly abandoning ship as something iteratively better was released).
I agree wholeheartedly with this. And it's also why I love Ember, you get templates, routing, data access all working together with minimal configuration. I love Django and part of the reason why is that it's opinionated, and Ember is the same.
I'm sorry, Ember has come a huge way in 2 years. We've got 2.0, which was a big leap forward, a whole bunch of concepts were refined/removed or changed.
Also you're flat out wrong: Ember-cli isn't really anything to do with the framework. You don't need it to write Ember apps, it's just the communities command line tool for managing Ember projects. That's all.
The idea that Ember is made by/for small and medium sized companies is a bit dated. Several Ember and Ember-CLI core contributors have and continue to work at larger companies like LinkedIn and Yahoo.
In particular, LinkedIn has been using Ember (with Ember-CLI) for over a year now and has found a lot of benefits from its adoption. Having a build system and conventions that a community maintains lets us focus on building applications instead of tooling (though we still have our share of internal tools). We also can give back to the community for things which matter more for applications "at scale". LI, for instance, funded a good portion of the FastBoot work and has been a key driver in the Ember Engines effort recently.
All that to say, Ember (and Ember-CLI) can serve the needs of the whole spectrum of company/team sizes. While it still has some issues to sort out for larger applications, to say it isn't being influenced by large companies isn't really accurate any more.
Having worked at LinkedIn in the past, and seeing the state (stagnation) of their products both current and past, that's certainly not a ringing endorsement.
Another great thing about ember-cli is that it has very quickly build around it a great community [1]. There are a lot of high quality, well tested addons that are easy to install and use, and it's easy to create your own as well.
The best part about ember-cli is that everyone in the Ember community uses it. No one builds Ember apps without it. The opposite is true of any community/third party React CLI and it's a very powerful difference.
> I think the React team needs to take a little more responsibility for the eco-system it created. You can't call it just a view library when most use cases use it to develop entire applications.
This is the reason I've embraced React. No, Facebook doesn't dictate how React fits into the rest of your app, and yes, it requires more effort up front to fit the pieces together. But judging by the popularity of React vs. kitchen-sink frameworks like Ember/React/etc., many developers seem willing to invest this effort.
Another comment here mentions Django; clearly some developers prefer the batteries included approach, but others don't. Is one preference right and the other wrong? Is any developer that doesn't adhere to your preference not taking "responsibility"?
It's a matter of encouraging health in a community. A lack of proper resources(which can be everything from documentation, tutorials, guides, libraries, to tools like Ember-CLI) can lead to mistakes in design and part of your community going off on a tangent, which leads to dead branches of development trees.
For example: While React still works for a lot of people who did things in ways advocated early on, the rise of Redux and functional reactive programming has caused the community to move in a direction many library authors weren't aware of when they began.
Is it anyone's fault? No, not really- but taking advantage of stewardship in a community can lead to better tools and resources that help newbies, take some of the work out of your hands, and keep quality for everyone as high as possible.
Absolutely agree. Innovation also is much easier when not boxed into one approach. It's like people are blaming react for the revolution it created on the client side.
> There's no official path from view layer -> complete app (no guidance for data flow, how to communicate with the server, server side rendering, routing on the client).
Every time I've decided to take an afternoon to poke at React this is where I've given up. I totally understand the model and appreciate how useful it can be but I've never been clear about how to actually hook it up to a backend that isn't just the generated demo scenario and what the requirements for my backend would be.
I think this is common. For me the front page and JSX threw me off. React was so un-opinionated that it can loose its appeal when it presents itself. Once I took an opinionated tutorial it became much clearer to me.
Since then I've used React in conjunction with Django, PHP/Laravel, converted large jQuery codebases to React and created frontend-only sites. I've not yet gone full-on with a NodeJS back-end and isomophic and that's fine for now.
Pass your data into a root component via props. Or use XHR requests to load data from your backend into your root component and manipulate them in your state. Let the data changes in the root component trickle down via props. Keep it simple with React loaded via a <script> tag and work from there.
Not much more to say about this than that I do not agree, that I think flux-alikes are overused, and that it's just as easy to go too far the other direction, where nothing has any state even for trivial UI state concerns.
It seems like an afternoon is an awfully short time to allot to try a new framework / approach. I have definitely found lots in the Frontend world extremely frustrating at first given there are so many ways to do something, but it eventually clicks and makes sense.
I suppose that's the price people will pay for needing the latest shiny (React) instead of the now old and boring Ember or AngularJs. And also thinking that the solution that works for Facebook is the one that is the best fit for a small startup, because someday they will reach Facebook's size.
To clarify, I like old and boring because it generates less JavaScript fatigue.
You don't think a legacy AngularJS project is full of "fatigue"? I shudder at the thought. Angular 1 is so awful, even the creator himself, Misko said it really wasn't intended to be used in this way.
I know the cool thing amongst us older folk are to say "Oh there goes them darn ole kids chasing their new toys again" but this is a case where very clearly one is much more suited for the job than the other. There's nothing wrong with a winner emerging. All of the "problems" people gripe about here about React can be avoided. I have posted this before, but I'll post it here again -- You wouldn't go to learn how to program Java by first learning how to configure maven, download dependencies, set up your project in an IDE, and then build and deploy your WAR through Jenkins into a J2EE container for "Hello World"
React has all the goodies provided by the community, but React IS just a library. If you want to learn React -- copy and paste the latest CDN, use the in-browser transformer, and freaking learn react. The tutorials are great, and so is the article "Thinking in react"
In any case, I haven't looked at this CLI, but if it's anything like the ember-cli I am sure it will help with the artificial gripes.
I don't think a legacy AngularJS project is necessarily full of any more fatigue than a React project will be in a few years time.
That's not really fair, though. It will be a React + x + y + z project, because as you said, React is just a library, and it needs other pieces to fill the gaps provided by some of these other frameworks.
I could be wrong, but it will take a couple years to tell. By then, React will be old news also.
The problem is that when frameworks develop these CLIs they tend to think only about the CLI users and it becomes larger and larger a requirement. Personally I'm a web developer, I don't want to be a React developer or an Ember developer, etc. so the more difficult you make it to use your stuff with normal web technologies the less I want to have anything to do with it.
> The problem is that when frameworks develop these CLIs they tend to think only about the CLI users and it becomes larger and larger a requirement
Well there are two ways to modify an Ember project: create a bunch of files in various places by hand, or run `ember whatever` and have it done for you. The CLI is the preferred way of doing it for a lot of (good) reasons but if you want a new component running `ember g my-component` and having it make the component JS file, the template and the tests for you in one fell swoop is awesome.
> so the more difficult you make it to use your stuff with normal web technologies the less I want to have anything to do with it.
I don't understand your point? What's a 'normal web technology'?
So you want to write HTML for a living? Ok, that's cool. But things have moved on a bit since then.
I mean, you're commenting on a thread about JS libraries that enable you to write awesome single page apps and saying you... don't want to write JS?
If I get you correctly then I used to be like you. "Eww, javascript". Then I was forced to use Ember for a project where I work and it is amazing, nothing that the app does could even remotely be done with HTML or even a bunch of jQuery spaghetti.
JavaScript is part of the HTML standard so I'm ok with that. What I'm not OK with is the expectation that I'm going to run 20 tools between editing a file and refreshing my browser.
They are saying that they aren't going to make the CLI a requirement and I hope that's the case, but my concern is that "use the CLI" is going to become the quick answer.
But that's the beauty of Ember: you run one tool. `ember`. Sure it uses Babel under the hood and a CSS preprocessor, but they are not separate tools really.
But what exactly is wrong with a CLI? I'm sorry but I really don't get your point. I mean, you kind of have to run one or more anyway if you want to do modern JS development because the JS you write isn't the JS that gets served to the browser (and for good reason). A CLI is a requirement and has been for a while now.
> A CLI is a requirement and has been for a while now.
It's really not, you can get by fine with a text editor and a web browser only. You can use regular web components (works unmodified in Chrome, there's a polyfill for other browsers) and get modularity and all of the things you need. You can add Polymer which, again, doesn't require anything but an editor and a browser.
Do you combine and minify your code? If so, how—presumably a command-line tool? It's totally fine to say that you'd prefer to keep your dependencies fairly minimal, but pinning that on whether you use a CLI or not seems a false dichotomy from here. The question is how much tooling and what it does for you, versus what it gives you. There is no doubt a real tradeoff there; there are costs to something like Ember CLI and there's no reason everyone should think those costs are worth embracing in every instance. But to be sure, there are upsides: being able to write ES2015, being able to pull in tests automatically, being able to run your entire test suite against the entire app without needing to write any glue to do that yourself... those things do have value, even if they're not particularly appealing to you. And all of those quite comfortably use the official specs to get that work done.
That said, someone could probably code a locally hosted react app that wrapped the CLI, and also indicated/logged what commands were run, output, errors, etc.
I love CLI, I live in vim and tmux as much as I can, but I think point and click interfaces are better for discovery, whereas a command line interface is better for reproducibility and therefore instructional learning.
Currently playing around with the idea of a React app for building React apps.
Basically, it's an admin for specifying routes, models, components, database schemas, views, stores, reducers, etc. They are defined declaratively and serialized. Then can be feed to either a build step or a bootstrap that can load create the app dynamically.
Each type of thing that can be edited has its own dedicated UX.
Not much built yet but I'd be curious if anyone else has similar ideas / solutions.
There's several projects like this. Its an opinionated React startup kit utilizing Redux, React Router and Redux-Sagas. With generators, a server etc.
Because React doesn't provide the whole framework there's a bunch of these to get you started so the space is more complex to navigate then something like Ember.
I've done a lot of React but have since been burned out by it. It takes so much configuration just to set up something basic like server side rendering. After a year of hacking around with React and wallowing through the pain, I decided to just use Django and django templates. React is nice for a whole company that has one app with a tough initial setup but great performance in the long run, but its hard for individual hackers like me who just want to get tiny webapps up and running.
Having used Ember and React, this was my experience too. Ember lets you get up and running really fast. However, once you start doing anything outside of something it doesn't have an opinion about, you're stuck working around the framework. Good luck with that.
At the end of last summer we started to make the migration from Ember to React, and we removed the last Ember code from our code base in April of this year. It has been a slow process, but it has paid off immensely in productivity. I'd rather write code to solve all my problems than have a solution that solves 90% of my problems out of the box but then makes solving the remaining 10% a hacky, unpredictable process.
> I'd rather write code to solve all my problems than have a solution that solves 90% of my problems out of the box but then makes solving the remaining 10% a hacky, unpredictable process.
So are you saying that, absent a better framework than Ember, you would have recommended migrating to no framework at all?
No, when I say "I'd rather write code to solve all my problems" I'm talking about React. In React, things happen because you call a function, not because you named something the name that makes them get called, with only a handful of exceptions. You want to change the state, you call `setState`, you want to render the component you call `renderComponent`. It all looks surprisingly like writing code with a very helpful library.
This is great since it provides an OFFICIAL opinionated set of tools for building React apps which is typically the largest barrier of entry for new developers looking to experiment with this technology.
However, it is missing a lot of core features that typically come standard with Webpack/React boilerplates. Directly from their Github:
Some features are currently not supported:
Server rendering.
Testing.
Some experimental syntax extensions (e.g. decorators).
CSS Modules.
LESS or Sass.
Hot reloading of components.
So a great first set of features for a simple React starter project, but for those of you looking to expand the development toolkit from this currently limited configuration, check out the following link to search React boiler projects on github based on a number of criteria like the ability to search by features included such as CSS Modules, Hot Module Replacement, etc.
Lack of testing is a pretty big oversight given how helpful testing is for someone getting started. Hopefully it is easy to just add mocha on top of this with out any mucking around?
I really would love to see all the "features" listed above (and more) as a part of this tool.
eg; `create-react-app --hot --less`
Including commonly-used defaults first, and adding full community bundling later, would be much appreciated. There are probably <10 such packages which would account for a wide range of the first week or so of any React project.
Good luck with this project and thanks a ton for dreaming it up & getting it out the door!
Thanks for plugging my list :) VERY happy to see that people are finding it a useful set of resources, and I'm continuing to add links to it as I go. I'm trying to find more intermediate/advanced content to fill it out, as I figure I've got more than enough basic tutorials listed for now.
Integration with now.sh ( https://zeit.co/now/ ) and uploading to gh-pages is something that was cut for the release but we are thinking about doing :)
a) How is this different from getting a custom starter kit/generator from Yeoman. Searching in yeoman, I see several for "React" with the top one having over 9.5k stars http://yeoman.io/generators/
b) Is Facebook planning to maintain and keep this generator current? Why don't they just contribute/recommend an existing generator
This is great for someone who wants to get started to learn React, but is missing a ton that is needed for a real world production app.
* No isomorphic rendering
* No hot module replacement
* No generators
* No dockerization
* No Sass support
* No test environment setup
* No code splitting
Granted, some things like hot module replacement and generators are not necessary, most of the others are (isomorphic rendering, code splitting, sass, dockerization).
I'm not saying you need those things for your personal react app going into production, but when dealing with bigger teams for a critical app they really become important tools
In all fairness, most "critical apps" won't be using a standardized boilerplate anyways. It makes little sense to optimize for the least-likely consumer.
1. Sass is not as needed as it used to be (native CSS variables, PostCSS, CSS Modules, Radium, inline styles etc.).
But of course many users prefer Sass. But Sass in its CSS syntax (SCSS) is (if I'm correct) just super set of CSS. You can always start project using vanilla CSS and when project will grow, you can add Sass.
There are two approaches to develop new projects: big design up front and YAGNI principle (you ain't gonna need it). I prefer YAGNI and I'm glad that Facebook generator is so minimal. But I don't know what they are planning to do with this project. I think this project would be a lot worse if they forced to use Sass(or Radium or any opinionated CSS solution).
2. code splitting? If I understand correctly it's Webpack feature needed mainly for production, not development. So why to add this on the very beginning of your project?
My point wasn't to belittle the work, they did a great job, it was just pointing out how far you can go with something like this. This just doesn't have as many of the things people need as other similar projects do.
It seems like they were shooting for the MVP here, not trying to make it the kitchen sink. Not everyone wants dockerization, Sass, isomorphic rendering, etc.
I guess what I was trying to bring up, is that this has already been solved by a bunch of people already, but with a lot more features. We use Gluestick, but others use stuff like https://github.com/mxstbr/react-boilerplate
What an odd and arbitrary list. SASS support over LESS over PostCSS over CSS in JS? Component boilerplate generation is required for production? Hot module replacement is required for production? Everyone using React is looking for an isomorphic solution? Docker support?!
I think the point of the project is to acknowledge that React requiring transpilation to use is 100% accurate and there needed to be a transpilation / workflow solution to make it easier to adopt. It wasn't let me solve every single problem for you, including setting up your production deployment environment using Docker.
Dockerization, are you crazy? This is just a simple boilerplate. If you want something absurdly complicated (and frustrating to work with imo), use something like Este https://github.com/este/este
It's goal is to be for a front-end SPA. None of that is needed for it's stated goals.
Also - HMR, generators, dockerization, sass, & test environments are not needed for many/most projects initially. When they ARE needed you'll be beyond the point you need this kit anyhow.
After spending hours yesterday teaching a colleague about webpack, babel, configuration, etc, this is exactly what the React community needs. Finally some fucking sanity in the ecosystem.
I'm fairly close to finishing the conversion of my `dev-toolkit` into an npm-module. It is almost no-config, has scss, server-side-rendering, hot-reload and more. I'm a one man band but will get there. It's all on https://github.com/stoikerty/universal-dev-toolkit
The npm-version sits in a feature branch, just look for the corresponding PR if you're keen.
I have a release ready. Just pinned it at 5.0.3
It is similar to `create-react-app` but also has CSS-Modules (with SCSS) and a few other features like Browsersync and root-relative imports.
249 comments
[ 3.2 ms ] story [ 233 ms ] threadKudos to React team for bringing a superior pattern and making it actually practical to use.
Ditto for Redux. They're both low-level building blocks that could benefit from some official "opinions".
In a different note, I think if you write it yourself from scratch you'll have more control and knowledge down the road when it comes to nasty bugs but I won't blame you for choosing this over spending weeks setting up a React app.
Furthermore, the Eject feature (https://github.com/facebookincubator/create-react-app#conver...) allows someone to move from the default configuration to their own when they feel comfortable.
I think most boilerplates add way too much and are overly opinionated. I like that this is simple, and "eject" gives power users an even better starting point.
Right now, I'm going through the Om.next tut series, and it is pretty awesome so far. I think I'm going to pass on datascript, though. This is total skunkworks though, if people at work found out that was using clojurescript on the front end, they would be very concerned about me.
The killer feature for Om.next, imo, is using a reader function to define the relationship between a component and the one application state atom. Combine that with an identifying function that associates a component with a field in the application state, and you enable the framework to make very precise component updates.
React Starter Kit comes with GraphQL as its API layer. I love GraphQL, and have written tons of it when writing Relay code, but I wouldn't ever expect someone getting up to speed on React to use it.
You have to limit the number of things you throw at newcomers.
Off the top of my mind:
- Server or Universal rendering - Hot Module Reloading (refreshing is fine!) - (early stage) proposed JS syntax
The main thing that is missing from this package is testing, but that's a very opinionated kettle of fish.
My workflow for ramping someone up on React and eventually Redux looked like:
- A single React component with React.createClass
- ES6 class React components
- Add a component hierarchy and treat the top level component's state as the entire app state - pass down callbacks to update state. Look how this becomes harder to scale as we get more depth in our component hierarchy!
- Redux without the redux-react bindings. Also stateless function components.
Also, sweet project!!
IMO it's the worst choice Facebook could have made for this toolkit, as it breeds some awful habits.
What are the similarities with Grunt that aren't worth the mess and what are some of the awful habits that WebPack breeds?
What are your preferred ways to handle modules and build steps in general?
But they very fact you had to spend time abstracting away WebPack speaks volumes IMO...
>But they very fact you had to spend time abstracting away WebPack speaks volumes IMO...
Speaks volumes about its poor public API. I don’t understand how this this affects create-react-app, really.
But if you can suggest something better that solves the same problems, please do.
Sort of... think UNIX philosophy vs... I dunno, Windows I guess? With the way it currently does it you are always going to have a horrible public API because the approach is fundamentally flawed.
And that's before I even get into how it solves those problems.
Now is it a bad thing it exists? No, obviously not. I'm glad it does, but we can learn what not to do from it as well.
It's config heavy for very little benefit.
Code vs config is a huge bikeshed
Not really. Historically it's been an indication of the quality of a system.
The “stupid arbitrary” system has a number of benefits. It revs your assets for production automatically with content hashes. It saves you from filename typos because all assets (CSS, images) are part of the same build pipeline. It throws on parse errors in CSS as part of your normal dev flow, not at some later stage. It allows for fast hot reloading of styles in development.
The only downside I’m aware of is that it doesn’t work with some other tools without special plugins or configuration. Well, you have to pick your tradeoffs, right? I’d love to talk about technical tradeoffs of both systems but your comment reads more like a knee-jerk reaction than a technical assessment.
Yes, it does. Those features aren't exclusive to webpack though (they're really, really, really old features of webdev) and can be replaced by much less silly systems.
I mean literally everything you just listed is better handled by more mature, developed, tools.
https://github.com/olahol/reactpack
Doesn't seem like this project differs that much, although this looks to have the backing of core React developers.
Couldn't they just offer a "facebook-certified" starter pack/bootstrap?
I guess you could just do an immediate eject?
Edit: looks like they contemplated that in the survey: "Yes, and I will run `eject` straight away"
No, because Facebook engineers don't use or need that. Facebook only open sources or releases stuff they use—except for this. This is actually the first and probably only open source project from Facebook that they don't use in production.
At the moment it's "all or nothing" in that you can decide to let everything be configured, or nothing be configured ("ejecting"). This makes perfect sense, but I think a more ideal solution would be having layers of configurability that let you more gracefully set your preferences without completely abandoning this tool's utility.
I'm not saying that's easy, but it's a direction I'd be excited to see.
http://i.imgur.com/2suYgKq.png
http://i.imgur.com/FnLVfw6.png
[1]: For example, I run my app from within a Vagrant Virtualbox machine that doesn't forward filesystem notifications correctly, so I have to configure Webpack's hot reloader to poll for changes instead of listening for fs events.
> “Ejecting” lets you leave the comfort of Create React App setup at any time. You run a single command, and all the build dependencies, configs, and scripts are moved right into your project. At this point you can customize everything you want, but effectively you are forking our configuration and going your own way. If you’re experienced with build tooling and prefer to fine-tune everything to your taste, this lets you use Create React App as a boilerplate generator.
Configuration makes it very hard to move forward or swap underlying tools. So we’ll stick with no configuration for as long as we can, and try to figure out a way to solve common problems by other means (e.g. smarter detection, platform-specific code, etc).
If a person knows enough to want to configure, then they have learned enough to venture out on their own via eject.
The difference in cognitive load between "zero config" and "some config" is enormous.
"zero configuration" === minimal mental model, no scope for misunderstandings, misconfigurations, minimal documentation, almost no scope for user errors and also minimal learning time
"some configuration" - even one single switch/option === learning the mental model, understanding, version problems with the old way of configuring, documentation of configuration, potential for errors, old & out of date blog posts on the Internt telling how to do it the old way, beginner pain
You will come under constant pressure from people who want to add "just this one teensy option" and will criticize the project for not having it. Resist the criticism - beginners need zero config.
The root of all evil in JavaScript development and build systems is configuration.
However, I predict that there will be a softer escape hatch than "eject". At least a single option to take the webpack and config and whatever you want with it, at your own peril. This would be completely unnecessary unless you really Know What You're Doing.
Once you have done some coding, found your feet and stepped up a few levels of comfort and understanding, then sure thing, start venturing out into the world of configuration via "eject".
I think it's a good thing that it is pure zero configuration. If you want to configure then you have graduated.
With Ember CLI you get a great testing setup with Qunit. While I prefer Mocha over Qunit, I'm at least glad that testing is a first class citizen in the CLI.
This is one of the best things about Ember. `ember new`, `ember serve`, ember generate component my-component`, `ember build`, `ember deploy`, `ember install`. It's opinionated but it lets you get productive right off the bat. I tried React but after a couple of days I just couldn't get it working, waaay to many options. So I switched to Ember and haven't looked back.
https://www.ember-fastboot.com/
Also two commands to get server rendering working.
Ember is made by folks who work on / for small and medium companies[1]. They don't have the build infrastructure Facebook does and are able to create an anointed solution in Ember-CLI because they'll use it daily. React is stuck in a place where the environment it's developed in is unique from what any other user will see. It's difficult to solve a problem when you're not in the space.
EDIT:
This leads to things beyond CLIs too. React is still billed as just a view library instead of a solution for building an entire app. There's no official path from view layer -> complete app (no guidance for data flow, how to communicate with the server, server side rendering, routing on the client).
I think the React team needs to take a little more responsibility for the eco-system it created. You can't call it just a view library when most use cases use it to develop entire applications. You have to provide more guidance, you can't fallback to Facebook not using it that way as the default response. In my opinion most of the Great Javascript Fatigue of 2015-16 was caused by users trying to fill in the blanks left by the React team and producing one solution after another (and quickly abandoning ship as something iteratively better was released).
1 - Tom, Yehuda at tilde.io
No, I still fully agree.
We think React is a tool to create great UIs, and UIs definitely include concerns like data fetching, etc. So some of this might make it into React in some form in the future.
(The guy you're responding to is the creator of Redux) :-)
They say that Dan, at Facebook, is one the most active members of the React team.
I agree wholeheartedly with this. And it's also why I love Ember, you get templates, routing, data access all working together with minimal configuration. I love Django and part of the reason why is that it's opinionated, and Ember is the same.
More concepts, it's own CLI and build system, outdated docs. (I used it 2 years ago)
And if we CAN'T "make decisions today based on the state of things years ago", then we're really screwed.
But Ember has likely come a long way in that time - I think this is mcardleliam's point.
Also you're flat out wrong: Ember-cli isn't really anything to do with the framework. You don't need it to write Ember apps, it's just the communities command line tool for managing Ember projects. That's all.
Practically, there are Ember modules/extensions/features that require Ember-CLI to work or are a huge pain to work with, if you don't use the CLI...
for example animation libraries or glimmer.
In particular, LinkedIn has been using Ember (with Ember-CLI) for over a year now and has found a lot of benefits from its adoption. Having a build system and conventions that a community maintains lets us focus on building applications instead of tooling (though we still have our share of internal tools). We also can give back to the community for things which matter more for applications "at scale". LI, for instance, funded a good portion of the FastBoot work and has been a key driver in the Ember Engines effort recently.
All that to say, Ember (and Ember-CLI) can serve the needs of the whole spectrum of company/team sizes. While it still has some issues to sort out for larger applications, to say it isn't being influenced by large companies isn't really accurate any more.
https://github.com/tomdale/rfcs/blob/master/active/0000-engi...
[1]: https://emberobserver.com/
This is the reason I've embraced React. No, Facebook doesn't dictate how React fits into the rest of your app, and yes, it requires more effort up front to fit the pieces together. But judging by the popularity of React vs. kitchen-sink frameworks like Ember/React/etc., many developers seem willing to invest this effort.
Another comment here mentions Django; clearly some developers prefer the batteries included approach, but others don't. Is one preference right and the other wrong? Is any developer that doesn't adhere to your preference not taking "responsibility"?
For example: While React still works for a lot of people who did things in ways advocated early on, the rise of Redux and functional reactive programming has caused the community to move in a direction many library authors weren't aware of when they began.
Is it anyone's fault? No, not really- but taking advantage of stewardship in a community can lead to better tools and resources that help newbies, take some of the work out of your hands, and keep quality for everyone as high as possible.
Every time I've decided to take an afternoon to poke at React this is where I've given up. I totally understand the model and appreciate how useful it can be but I've never been clear about how to actually hook it up to a backend that isn't just the generated demo scenario and what the requirements for my backend would be.
Since then I've used React in conjunction with Django, PHP/Laravel, converted large jQuery codebases to React and created frontend-only sites. I've not yet gone full-on with a NodeJS back-end and isomophic and that's fine for now.
Pass your data into a root component via props. Or use XHR requests to load data from your backend into your root component and manipulate them in your state. Let the data changes in the root component trickle down via props. Keep it simple with React loaded via a <script> tag and work from there.
To clarify, I like old and boring because it generates less JavaScript fatigue.
I know the cool thing amongst us older folk are to say "Oh there goes them darn ole kids chasing their new toys again" but this is a case where very clearly one is much more suited for the job than the other. There's nothing wrong with a winner emerging. All of the "problems" people gripe about here about React can be avoided. I have posted this before, but I'll post it here again -- You wouldn't go to learn how to program Java by first learning how to configure maven, download dependencies, set up your project in an IDE, and then build and deploy your WAR through Jenkins into a J2EE container for "Hello World"
React has all the goodies provided by the community, but React IS just a library. If you want to learn React -- copy and paste the latest CDN, use the in-browser transformer, and freaking learn react. The tutorials are great, and so is the article "Thinking in react"
In any case, I haven't looked at this CLI, but if it's anything like the ember-cli I am sure it will help with the artificial gripes.
That's not really fair, though. It will be a React + x + y + z project, because as you said, React is just a library, and it needs other pieces to fill the gaps provided by some of these other frameworks.
I could be wrong, but it will take a couple years to tell. By then, React will be old news also.
Well there are two ways to modify an Ember project: create a bunch of files in various places by hand, or run `ember whatever` and have it done for you. The CLI is the preferred way of doing it for a lot of (good) reasons but if you want a new component running `ember g my-component` and having it make the component JS file, the template and the tests for you in one fell swoop is awesome.
> so the more difficult you make it to use your stuff with normal web technologies the less I want to have anything to do with it.
I don't understand your point? What's a 'normal web technology'?
https://html.spec.whatwg.org/multipage/
I mean, you're commenting on a thread about JS libraries that enable you to write awesome single page apps and saying you... don't want to write JS?
If I get you correctly then I used to be like you. "Eww, javascript". Then I was forced to use Ember for a project where I work and it is amazing, nothing that the app does could even remotely be done with HTML or even a bunch of jQuery spaghetti.
They are saying that they aren't going to make the CLI a requirement and I hope that's the case, but my concern is that "use the CLI" is going to become the quick answer.
But what exactly is wrong with a CLI? I'm sorry but I really don't get your point. I mean, you kind of have to run one or more anyway if you want to do modern JS development because the JS you write isn't the JS that gets served to the browser (and for good reason). A CLI is a requirement and has been for a while now.
It's really not, you can get by fine with a text editor and a web browser only. You can use regular web components (works unmodified in Chrome, there's a polyfill for other browsers) and get modularity and all of the things you need. You can add Polymer which, again, doesn't require anything but an editor and a browser.
I love CLI, I live in vim and tmux as much as I can, but I think point and click interfaces are better for discovery, whereas a command line interface is better for reproducibility and therefore instructional learning.
Currently playing around with the idea of a React app for building React apps.
Basically, it's an admin for specifying routes, models, components, database schemas, views, stores, reducers, etc. They are defined declaratively and serialized. Then can be feed to either a build step or a bootstrap that can load create the app dynamically.
Each type of thing that can be edited has its own dedicated UX.
Not much built yet but I'd be curious if anyone else has similar ideas / solutions.
http://www.reactboilerplate.com/
There's several projects like this. Its an opinionated React startup kit utilizing Redux, React Router and Redux-Sagas. With generators, a server etc.
Because React doesn't provide the whole framework there's a bunch of these to get you started so the space is more complex to navigate then something like Ember.
Is server side rendering basic or necessary in most "tiny" apps?
Isn't it both?
Would appreciate feedback:
https://github.com/lancecarlson/react-mvc
One thing I don't see a lot of is opinions in React on deploying. I wrote a blog post on deploying this new boiler using netlify, pretty straight forward. https://www.netlify.com/blog/2016/07/22/deploy-react-in-30-s...
At the end of last summer we started to make the migration from Ember to React, and we removed the last Ember code from our code base in April of this year. It has been a slow process, but it has paid off immensely in productivity. I'd rather write code to solve all my problems than have a solution that solves 90% of my problems out of the box but then makes solving the remaining 10% a hacky, unpredictable process.
So are you saying that, absent a better framework than Ember, you would have recommended migrating to no framework at all?
However, it is missing a lot of core features that typically come standard with Webpack/React boilerplates. Directly from their Github:
Some features are currently not supported:
So a great first set of features for a simple React starter project, but for those of you looking to expand the development toolkit from this currently limited configuration, check out the following link to search React boiler projects on github based on a number of criteria like the ability to search by features included such as CSS Modules, Hot Module Replacement, etc.http://andrewhfarmer.com/starter-project/
For those looking to learn more about the ecosystem, the following resource lists might be useful.
More React resources: https://github.com/enaqx/awesome-react
React/Redux resource links: https://github.com/markerikson/react-redux-links
This is not an oversight, we literally developed this project in a single week. We plan to add testing, just need to decide on the runner and good defaults: https://github.com/facebookincubator/create-react-app/issues....
eg; `create-react-app --hot --less`
Including commonly-used defaults first, and adding full community bundling later, would be much appreciated. There are probably <10 such packages which would account for a wide range of the first week or so of any React project.
Good luck with this project and thanks a ton for dreaming it up & getting it out the door!
(If we don't count sharable requirement).
a) How is this different from getting a custom starter kit/generator from Yeoman. Searching in yeoman, I see several for "React" with the top one having over 9.5k stars http://yeoman.io/generators/
b) Is Facebook planning to maintain and keep this generator current? Why don't they just contribute/recommend an existing generator
Additionally, unlike a generator, it doesn’t expose you to any configs so you can focus on your code. However you can “eject” if you really want to.
I'm not saying you need those things for your personal react app going into production, but when dealing with bigger teams for a critical app they really become important tools
But of course many users prefer Sass. But Sass in its CSS syntax (SCSS) is (if I'm correct) just super set of CSS. You can always start project using vanilla CSS and when project will grow, you can add Sass.
There are two approaches to develop new projects: big design up front and YAGNI principle (you ain't gonna need it). I prefer YAGNI and I'm glad that Facebook generator is so minimal. But I don't know what they are planning to do with this project. I think this project would be a lot worse if they forced to use Sass(or Radium or any opinionated CSS solution).
2. code splitting? If I understand correctly it's Webpack feature needed mainly for production, not development. So why to add this on the very beginning of your project?
I think the point of the project is to acknowledge that React requiring transpilation to use is 100% accurate and there needed to be a transpilation / workflow solution to make it easier to adopt. It wasn't let me solve every single problem for you, including setting up your production deployment environment using Docker.
Well yes, because any CSS in JS solution (in PostCSS) is just plain bad for a myriad of reasons.
That would leave you with SASS vs LESS and SASS is massively more popular and supported.
Also - HMR, generators, dockerization, sass, & test environments are not needed for many/most projects initially. When they ARE needed you'll be beyond the point you need this kit anyhow.
The npm-version sits in a feature branch, just look for the corresponding PR if you're keen.
Hope anyone reading this finds it useful :)
https://github.com/stoikerty/dev-toolkit