We're in the beginning stages of this project, so right now we're just trying to figure out how best to start.
We want to create a UI library of React components, and what we'd like to do is create the library so that you can import just one element directly, so that:
// bad
import {Button} from '#mycompany/uilib'
// good
import Button from '#mycompany/uilib/Button'
That's the big question. So we're looking at a couple of solutions to start - we've taken a look at create-react-library and lerna or storybook might be better starts?
Here's what we're looking for, from a business & engineering perspective.
We all think Typescript is the way to go.
We think that rollup might be better for this type of project than Webpack, but we're not entirely sure. It may be worth a little overhead if it increases dev turnaround and is easier to maintain/configure.
But the big question is that I'm not sure how packages like, say, '#material-ui/core/Button' do it. Googling hasn't helped much, thus the appeal to the StackOverflow gurus. Thanks.
Firstly, I'd suggest sticking with the well-written and supported create-react-app with TypeScript support. This gets a lot of the initial config out of the way.
Then, I'd encourage you to have a look at a combo of Yarn Workspaces and Lerna. Setup can be tricky, but the automated symlinks, and the ability for your individual components (packages) to depend on each other, makes this a powerful combo.
On the dev cycle and "playground" front, Storybook is hard to beat. They have some amazing stuff coming soon around docs, which will be quite powerful (and visually pleasing)
Let me know if you have any more questions - this topic is front-of-mind for me at the moment, so my head is swimming with ideas.
Related
I am looking to develop a React JS web app, using react-boilerplate for development
https://github.com/react-boilerplate/react-boilerplate
But the above boilerplate doesn't seem to be updated quite often, which boilerplate should be used for building simple web apps
Create React App is pretty much a single command setup with all the basic React boilerplate code for you from the command line.
Although as others have said, ideally you should look into setting up your own boilerplate to suit your own needs and maintain it as you best see fit.
There is not a simple good answer to this problem. Ideally, you should create your own boilerplate and maintain it over time, because only you will know what are your most common needs. There are no perfect boilerplates and almost every boilerplate is opinionated.
You might try to create a boilerplate for yourself from React CRA or other sources that might fit your needs in a great measure. It takes time in the beginning, but after a while you might update it every few months to make sure it is up to date and make it the starting point for all your new projects.
Sometimes a good point of inspiration would be the Yeoman Generators. Take
a look here: Yeoman Generators
React-boilerplate no longer to maintain, it has some library doesn't upgrade yet. You can try this repository, same about structure and way to use.
https://github.com/react-boilerplate/react-boilerplate-cra-template
React-boilerplate is not being maintained. You can use ARc which is a React starter kit based on the Atomic Design methodology, while I'll suggest you use create-react-app which is strongly recommended by the community.
The team and I are embarking on a React project. We are primarily a Microsoft team who are all experienced with .Net for decades!
We have been really impressed with React and feel like we are going down that route. We have done all the Angular vs Vue vs other options to death.
As we are all C# developers we are planning to use React with TypeScript. Mainly for two reasons
We are used to a strongly typed code bases coming from C#, so we have been more successful with the React with TypeScript.
The code base has the potential to become quite large and we plan on sharing React components and TypeScript interfaces between teams/projects via an internal NPM registry. We think TypeScript will highlight typing issues early especially when refactoring and allow sharing more effectively.
I have talked with another similar sized team who did not start out with TypeScript (or Flow) they ran into refactoring problems when their solution got large and retrofitted in TypeScript.
I would like to start out with TypeScript from day one as a result
However, I am getting some push back from the more Javascript orientated developers. Who say:
TypeScript not required in modern ES6 JavaScript applications
The wider React community does not use TypeScript
Hooks which are new to React compound the points above
Have I wandered into a religious argument rather than a technical one (static typing vs dynamic) or are there points justified?
Happy to admit I am a JavaScript novice compared to my C# experience so I could be totally missing the point.
I thought I would pose the question to the community and find out some educated opinions. Please be kind
TypeScript not required in modern ES6 JavaScript applications
It depends on what the requirements are. You say you anticipate refactoring, I have some experience with refactoring my own javascript and TypeScript projects. I can say that without TypeScript, refactoring takes more effort - you have to look at the implementation code a lot, just to be able to understand what the interface is. This can be alleviated by extensive amount of API documentation and unit tests, but - how many projects out there have those, and how many projects maintain the API doc so that it matches 100% with the actual code? Type annotations are a nice way to express what the expectations in the code are, and have a side benefit to be maintained together with the code.
The wider React community does not use TypeScript
Everyone uses what's best for their needs. In reality, there is no "community", there's just a bunch of people working on different projects. What's suitable for a majority of people might not be the best for you.
Hooks which are new to React compound the points above
The recent version of typings for React does seem to support hooks. The result of google search for "react hooks with typescript" shows that a lot of people are using React hooks with TypeScript. I'm not aware of any specific problems, but if there are any, there's a chance they will be sorted out, eventually.
I want to use react/redux. So I did "create-react-app test" after 5 minutes, I get a directory with 22,538 files and takes 131MB.
Meanwhile if I google, "jsfiddle react redux" and look at the first link I get a jsfiddle with just a few files it loads, all within the browser.
So why should I use create-react-app versus just loading a few dependencies in the browser? Is the overhead worth it? Is it mainly due to webpack?
I use create react app (CRA from now on) since react redux has too much boilerplate to manage things.
CRA is basically a startup-kit: that explains why has so much basic package asset in terms of import.
I can assure you that maybe you'll pay the cost to use redux on large projects (and dependencies...and packaging!!!).
Mostly depends on teams anyways, if you need to standardize how to operate on things and your team is large, Redux should be useful since this way of act avoids unexpected implementations because "there's a way" to do things.
my personal preference is not to use CRA. it was meant to be a starter kit for developers who want to learn react without wasting time on configuration and setting up the environment.
It is a fantastic learning tool if you start from scratch because all the magic is hidden from your view, you just focus on React and let cra take care of the details. but production projects are not that simple to handle. there are a lot of requirements which may come in and your cra may not support it. as it was meant to be a generic tool for learning react. you can eject it but then you should really avoid ejecting it as the config is extremely complicated.
with cra you are missing a very important base of your project. ie the webpack.
The way cra solves this problem is by hiding all the config by default, so after starting your project you are not exposed to Babel, Webpack, dev/prod environment, or any other config.
You start learning with a tool that does everything for you, but when you are ready to know how things really work under all that, what are you supposed to do?
With cra you have an eject script that can uncover all the config that is hidden beneath.
If you feel so adventurous to do it, you will find yourself into a really huge and scary config, meant to do a lot of stuff and designed to not be exposed to the end user.
if you are a senior developer then you must really try to configure your own webpack config according to your project requirement. webpack, babel, etc are very important because they are not just for react. you can use them in any modern javascript project. as a senior developer, you should really know how things are working, in case you decide to remove a library and add another you should know where and how to do it. and really should not rely on a tool that makes things simple for u.
All of this is not a hard rule to follow. but my personal experience .
I've spent the past few days looking at VueJs 2 with Vuex and i really like it.
Having only had a brief introduction to React, I've found vue js 2 has been easier to pick up.
React seems to be growing in popularity, but I can't see the benefits of React over Vue 2.
Both are component based frameworks with routing and state management tools.
So can someone explain which are the main differences between those frameworks?
This is an opinionated and subjective question. And it often starts holy-wars than really answering anything and thus it is not really suitable for StackOverflow. However, I will try to answer this in an objective manner as possible. (Note: I am purely comparing Vue with React and deliberately avoiding Vuex vs Redux)
Why Vue.js?
It is designed to be an approachable framework. It is suitable for beginners and advanced users alike. When you are starting with Vue.js, it is as simple as adding a script tag to your page. For the advanced developer, the possibilities are endless. You can start with any sophisticated build tools - TypeScript, Babel, Webpack, etc.
Vue.js is developed much after Angular and React. It has learned from both and managed to pick many best things from them into Vue. For a beginner, Angular's idea of components, services, dependency injection, bootstrapping application, etc can feel overwhelming. Same is applicable to React; JSX can feel odd (Even after years, I still find it weird.). Now, Vue.js is a cross-path. You can use angular like templates or you have the freedom to choose React like JSX.
Vue.js reactivity is very well abstracted. With Angular (digest cycle in v1 and zones in v2) or React, it is bit different. It takes time to learn these concepts.
There are tons of other reasons why Vue.js should be your choice. Sometime back, I had written an article explaining why Vue.js:
https://blog.webf.zone/vue-js-answering-the-why-after-15-months-62db797f75cc
Why React?
React is a pioneering library (It is not a framework) just like Angular. It introduced the ideas of uni-directional architecture, virtual-dom, components (stateful and stateless), etc.
React Native is another reason why you may want to consider React. It allows you to take the same code that you wrote for Web and build native mobile applications. Now solutions do exist in the Vue.js world. But definitely not as mature as React Native.
Functional programming: No way React is a library based on functional programming. But doing React right way means you need to use immutability, explicit state management and all these allied concepts stemming from functional world.
Redux: Redux is the darling of React world. It has unlocked wonderful architectural patterns for front-end world like time-travel debugging, explicit side-effects, functional components, etc.
Innovation: React has some crazy ideas like Relay, Next.js (Vue.js has Nuxt.js). I also heard about some Drap-n-drop editor for React; first class TypeScript and Flow support (You just cannot get TypeScript + Vue.js + JSX working together even in 2018).
Why not React?
Using only React is not enough. Very soon, you will end up with using Redux, Redux middleware, Immutable.js, etc. Doing all of that at once can be intimidating.
Redux. It is wonderful but it is verbose.
Most important: Using React without any sophisticated build system is cumbersome. To do anything serious, you will need Babel, Webpack, etc.
Again, which one is better?
There is no better solution. I will choose Vue.js if I need to accommodate a vast array of developers (beginners-advanced). I will choose React if my team is versed with all the extra overload that comes with React and team loves everything JavaScript approach to web development (Even CSS is JS).
Finally, there is one another angle to it. Programming in React needs discipline and hence, there is a good chance that you will find it easier to bring homogeneity to your codebase. With Vue.js, there is often more than one solution to a problem. That makes it good and bad at the same time.
You will not go wrong with either of them.
Building app with react with flux, I'm wondering developing an app with react is really efficient.
With flux all states are maintained by domain. All state of components have to manuplate in flux. I need to normalize data structure to consume in react components. This is verbose.
And more components are listed we have to consider rerender optimization. This is time consumer stuff.
Of course reusing react components is nice but configuring, designing, planning are also complex.
I need some advice of using react.
It is very overwhelming at first as there are so many decisions to be made. Just do a google search for "JavaScript fatigue" and you will realize you are not alone.
Fortunately, there are lots of great resources out there (both free and paid) to learn about all of this stuff. I personally used Cory House's two React courses on Pluralsight to get up to speed and found this route very helpful.
Still, project setup can be very time consuming with flux or redux, and you have to consider whether your application is complicated enough to warrant their use. React itself is extremely flexible and can be used in a simple application on it's own, or even in conjunction with other frameworks or tools like backbone.
There are plenty of things out there to help ease some of the pain of setting boilerplate for a react project.
https://github.com/coryhouse/react-flux-starter-kit
https://github.com/coryhouse/react-slingshot
Both of those are good resources (there are many more out there as well) and serve as good starting places.
Lastly, Facebook just the other day released an official tool that allows developers to start writing react apps without having to worry about any configuration. There are still some limitations to the tool, but it seems very promising and looks like a great place to start for beginners.
https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html