This may sound like a strange question, but I come from an emacs,xterm background and I am used to work a few files and have total control of what I am doing.
Now, I am going to learn react and vue, but when I examine the number of files that are generated for a project with:
npx create-react-app
vue create app
then it adds upp to 36000 for react and 19000 for vue. That is something that annoys me. Is there any way to create a project in both framework that has significally less files?
What you are referring to is scaffolding. You do not require scaffolding to use vue.
You are also using build components to minify JS code and include all types of things such as fall backs.
If you want to learn it from scratch you can start with the CDN version then move onto learning to use the templating engines and so on.
If you really want to start to learn things from scratch.
Use CDN Versions
Learn Rollup.js
Learn Vue
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.
I have made several products with Vue CLI 3.
However, I have never created a new project using Nuxt.
I am also interested in React because its market share is high.
However, I have never created a new project.
The reason is that I'm used to the convenience of Vue CLI 3.
Convenient template creation wizard
GUI with build buttons
I like the environment that exists.
For me, too much freedom in naming and arranging files is a problem.
I can't decide on the best one, so I can't develop fast.
There are two things I expect from Nuxt and React:.
$ vue create my-project
$ vue ui
Do Nuxt and React currently have those features?
If it does not exist,
Please tell me how you solve it.
If you have used vue cli then I'm pretty sure you can use nuxt's create-nuxt-app
It is easy just as it seems. The cli will guide you throughout the initialization process.
I've started curating an old web project based on tons of java code (old spring version) and a singular monolithic frontend module a.k.a. "The web-module" and I'm trying to upgrade the build steps and migrate old angularJS code bit by bit.
The idea was to implement Redux as a single point of truth between old and new code and Webpack for bundling new js files (vanillaJS/React) and other assets and integrating them in the old .jsp files that are littered with lots and lots of good old tags.
The old code is a mix of Javascript, jQuery and AngularJS, events are handled by jquery, I'm getting lots of funny side effects of conflicting / competing angularJS $scopes for every module I touched so far.
How does a sane individual integrate dist/ files generated by webpack into old .jsp files without messing everything up and/or losing her/his sanity? I feel kinda overwhelmed by all the things that might go wrong and I'm searching everywhere for success stories of people trying stuff like this. All I could find so far were migration guides but that's not an option with about 80-100 legacy angularJS files that would have to be rewritten for webpack so I need a solution that works side by side until I've managed to rewrite all the old angularJS Modules, one update at a time.
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 don't understand why the generator-ionic (along with other ionic + Yeoman project)s are so popular.
I don't see what the advantages are in using a yeomen generator in this case, this is.
I understand why the Ionic framework is useful in a Cordova project (as we all know, the UI, ngCordova plugins, it uses AngularJS, ect) but what specifically does the Yeoman component add that a basic Ionic project doesn't already have or that cannot be easily added with a bower install.
It seems to me that the Yeoman ionic projects just seem to be unnecessary bloat and can lead to more errors and library issues. I just do not see how components like karma and grunt (as opposed to ionic using gulp) fit into help with development.
True, you can set all this up by yourself. However, imagine setting this up on each and every project that you start. Kind of cumbersome, don't you think?
That's why some people tend to create these generators - to save you (if you like) the time of having to scaffold your application every time from beginning. Usually they provide some features (about which you can read on the Github pages) or they may even enforce some kind of project directory layout (which may help with big projects).
All in all, you don't have to use them, or stress about them. For instance, I personally don't use them on every project, but I appreciate the community effort and when I want to try something quick I tend to test them from time to time to see how they've evolved.
Don't hate, donate ;) (Sure sure, I know you're not hating, the statement just seemed appropriate).