I am using this https://github.com/Swiip/generator-gulp-angular
for scaffolding my project and I want to add browserify support to that
what steps should I take ?
yeoman has a angulpify generator. it's the best start i can think of for your question. just start a boilerplate project and dissect it.
However, as someone who tried almost everything out there, unless you really need to include some node modules in your project stay away from it. cuz actually for angularjs it really doesn't have any advantage.
Instead, you can try the concat style building. much easier for testing and deployment.
Related
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 know its base on what you need, but in bare minimum what would be the best start up frameworks, task runners, plugins etc to develop real world web application? Im a noob but I think Il set it up as using:
Npm, angularjs ,jquery, expressjs, grunt, bower, bootstrap?
Then you just check which plugin you need for particular job?
Because alot of tutorials are pretty focus on just the angular side of things but never a real world development environment that could help with the job.
And follow up question is it advisable to have a dst and src folder and when youre done put everything in dst? What would be your take on this matter? Thank you
And for your question, I would suggest Angular CLI. It creates all the boilerplate to start coding in Angular, including task manager with all most all the tasks you need, CSS and boiler plates, etc.. It even has a command-line interface which would help you create components, classes, services, etc of your app from the terminal.
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).
Basically what I want is a scaffolding tool (without bower and other stuff that it comes with) and controller, service/factory generators.
Yeoman is great but I was wondering if there's anything minimalist cli out there for angular.
Well, if all you want is a base angular app structure, that is called a boilerplate. There are a few available:
https://github.com/angular/angular-seed
https://github.com/ngbp/ngbp
https://github.com/angular-app/angular-app
However, you seem to also want a controller, service/factory generator. This will always require:
some kind of task runner (like Grunt)
or an IDE that supports templates.
Since you don't seem to like grunt (grunt IS AWESOME), these IDEs might help you...
Eclipse supports template, you can find some here
IntelliJ's PHPStorm or WebStorm have a feature called Live Templates which, IMHO, are far better than eclipse. You can find some premade templates here, but is easy to roll your own, as explained in this tutorial.
If you want a command line interface but not Yeoman's, you might want to have a look at the "Generation" section of this collection. As of today, it has one option that uses Lineman and two that made their own CLI, but they use bower. Anyway, if what you're looking for exists, it should be in there somewhere.
I am trying to add Angular to my arsenal and just started playing around with it this weekend. Looks cool!
In one of the videos done by Google, the guy recommended Yeoman. I'm watching another tutorial video on it now as well: https://www.youtube.com/watch?v=rqdRXqeqgZs
However, it looks like it generates everything (even writes tests for you??). In the video above, to generate a route he ran yo angular:route myroute which generated the controller, route, view, and test. I mean it's great that I get to see the structure, but I wrote like 0 lines of code.
Perhaps I should just start off with something like this where the file structure is way simpler but at least I have to write more lines of code? https://github.com/davidb583/white-angularjs-app
For a beginner, which do you recommend for a first project?
For a beginner to AngularJS, don't check out Yeoman. It's a very useful tool remember, but before you use it, understand why it was built.
Start off with AngularJS's tutorial - it is one of the best tutorials out there. It tells you all that you need to know to explore off on your own. I started out with that and at the end of it, I just loved the entire framework.
I did not start off with Yeoman until building 2-3 applications using AngularJS. Once you do this, you figure out some common tasks that you carry out for every AngularJS application.
That's where Yeoman comes in. Rather than doing the same thing again and again for each application you use Yeoman to automate a lot of stuff. Once you know the why of using Yeoman, you will understand the how of using it.
Without having worked in AngularJS sufficiently, do not try to use Yeoman. You will enjoy the tool but then you will be left wondering how to work with AngularJS without it.
My 2 cents.
To smalls app, Yeoman is awesome. But you will know his limits when you will want to split your app into modules.
with yeoman, you will have a structure like that:
scripts/
controllers
controller1.js
controller2.js
...
directive/
...
But In large app you probably want to have:
scripts/
controllers
userModule
controller.js
myOtherModule
controller.js
...
directive/
...
And for that, you need to create manually all the files.
My advice is to always start with yeoman but use their route/directive/etc generator only at the begining of your project.
For the tests, it only generate a file and a very simple test, ofcourse you need to modify it, to cover your whole app.
In addition Yeoman provide you a lot of tools with grunt like minifications of your assets, a jshint to use the best coding practices, etc.