After having been convinced to learn and use Angular.js, I was going to start a concrete web UI application so as to launch the learning wheel of experience. ( The app is going to be some kind of personal planning, to do list, reminder, pomodoro technique oriented, and so on...)
One of the tutorial videos I have seen, by the author of Angular, is about best practices. And one of the best practices is to start with the angular-seed project.
That is what I was going to do, but after googling a little, there are already at least two other projects that claim to be the good starting point:
angular-enterprise-seed
angular-sprout
I'm beginner, but I like to invest in the long term. Should I worry about using something else than angular-seed ? I feel like it's too early to ask myself this question, but if there are already two other projects, maybe there are some good reasons.
I've found that though many people use various seed projects, the easiest & most consistent starting point for an angular app (or any javascript web app) is Yeoman.
This app is a scaffolding tool that allows you to specify generators which will build the up the kernel of your application, complete with whatever libraries you desire (via bower) and a working grunt build file (most generators come stock with a build task, server task for live editing, and testing task)
Though an app like this is necessarily opinionated, the scaffolding it produces is still very generic.
example:
mkdir my-app
cd my-app
npm install generator-angular
npm install generator-karma
yo angular
They all have different merits so it depends on what you are looking to do. I wrote angular-enterprise-seed and can speak to its relative merits.
It is server-agnostic. This is important since a core tenet of AngularJS, and one of many things that make it attractive, is that it follows the Client MVC paradigm. This means it is entirely decoupled from any and all server technologies. Many existing seeds tie AngularJS to server technologies, such as angular-sprout (NodeJS) or grilled-feta (Google App Engine/Java). In the case of the aforementioned projects, if NodeJS and/or Java environments aren't already on your system, then you will have to go through several hoops just to see the seed come up. This can be alienating to PHP and Python developers, which results in limiting the project's community.
Up and running in seconds. Because it is server-agnostic, it can be run in any container (heck the filesystem for that matter). Suggested method is running "python -m SimpleHTTPServer" from the root directory -- this comes native on Mac and Linux so there are no additional steps.
Live preview. It's cheap to check on status of the project because a live version is always hosted on github. Because it's server agnostic, this is automatically done by copying master to the gh-pages branch from a cron job.
Rich styling. It includes Twitter Bootstrap and custom/buildable LESS out of the box, along with Angular-UI, Angular-NG, fonts, and a myriad of other tools to provide rich styling and responsiveness capabilities.
Widgets. Like Angular-Seed and Angular-Sprout, Angular-Enterprise-Seed exemplifies "best practice" layout, routing, etc. But it also provides a host of pre-built components that can be taken off the shelf and immediately reused. This is a bit difficult to do as it can require the convergence of several technologies. For example, to create the grid example, I combined angular-ui, angular-ng, angular-js, and jquery styling. There are component examples for modals, pagination, alerts, grids, and more.
Angular-seed is great as an academic exercise if you want to learn how the pieces work, but it will leave you longing for a more substantial jump-off point.
I haven't used angular-sprout so I can't speak to its merits. Maybe there is some room to merge angular-sprout and angular-enterprise-seed?
I recognize that this is an older question, but it seems to have a fair number of views, so it makes sense to recommend what has recently become a very popular alternative to both Yeoman and angular-seed: ng-boilerplate. ng-boilerplate differs from angular-seed in that it's designed from the ground up for large production web apps, and therefore is a better solution than angular-seed in my opinion.
To explain the differences between the Yeoman and ng-boilerplate methods of app kickstarting, I'll quote ngbp's creator, Josh D. Miller:
Yeoman is awesome. But the problem I have with the generators for AngularJS is that they package by layer rather than by feature. If we store all controllers in a "controllers" folder and all services in a "services" folder, etc., and all our tests someplace else entirely, it can be quite challenging to reuse our components.
This is also pretty good discussion by Josh on the Yeoman angular-generator issues forum, that goes more in depth regarding the setup of ng-boilerplate vs. yeoman.
Just to be clear, Yeoman is not a generator. Yeoman is a format/system for making generators. There are several generators made with Yeoman that you can use to generate an AngularJS application. People often mistakenly refer to one or another of them as "the" Yeoman generator. But there are many. Confused yet? Yeoman isn't the only generator making system. Brunch is another one.
To answer your question, here is a very comprehensive side-by-side comparison of many AngularJS generators one can use to start making a web application with AngularJS. Currently, it contains over 200 different aspects of these things. One of them is file organization style. So you can easily see which ones organize the files by feature if that's important to you. It is to me.
There are still several of these left to be added. The two mentioned in this thread are new to me. But this comparison should give you a good idea of the options and how they compare. It's editable too, so if any of you are experts in any of these things, feel free to share what you know.
God only knows why people keep making more and more of these things instead of just helping to improve the existing ones. If you have any guesses, I would love to have that mystery solved.
EDIT: to gain access to the doc I ask that you either complete a questionnaire to share your knowledge of something or lobby the experts to do so.
Go here to do a questionnaire:
http://www.dancancro.com/technology-questionnaires/
I like using Yeoman as well. Try these to get a good scaffold:
npm install -g generator-angular # install generator
yo angular # scaffold out a AngularJS project
bower install angular-ui # install a dependency for your project from Bower
grunt test # test your app
grunt server # preview your app
grunt # build the application for deployment
Related
I am creating a SaaS web app for online scheduling, and want to create multiple niche versions of this SaaS for different kind of businesses.
I want to know what's the best project structure for this.
I'm considering using forks or branches but I can't really decide what's the best for this scenario.
The sub-projects need to stay updated with the "core" SaaS project.
That means that when I fix a bug or add a new module (such as shopping features or theming) to the main project it is automatically available to all the other running sub-projects.
The features are going to be modular so new ones can be added or old ones removed.
Anyone can give me a light here?
Thanks!
Maybe you can use Lerna or yarn workspaces to share different modules across your applications.
Lerna: https://github.com/lerna/lerna
Yarn: https://yarnpkg.com/lang/en/docs/workspaces/
example: https://github.com/mui-org/material-ui/tree/next/packages
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.
Google knows best… but they're inconsistent!
The official ng CLI generates a scaffold one way, whereas the official tutorial chooses a different way.
I'm not talking just directory layout, typings.json vs types in package.json choices are also particularly worrisome.
What style am I meant to work with?
Angular 2's tutorial basically just shows the quickest and easiest way to get up and running with the framework. It omits mentioning things that could scare away a potential newcomer to the ecosystem, it is meant to be simple.
angular-cli on the other hand actively incorporates best practices, latest technologies like Webpack 2 Beta and tries to give developers a piece of software to quickly scaffold and develop scalable production apps without worrying about build-tools and configuration.
QuickStart
This is not the perfect arrangement for your application. It is not designed for production. It exists primarily to get you started quickly with learning and prototyping in Angular
angular/quickstart/README.md
angular-cli
The Angular2 CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!
https://cli.angular.io
See also: https://angular.io/styleguide
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).
I started working with sample sencha apps. I find it really hard to find typo and errors in my code.
I added the eclipse plugin for auto-complete during coding. Buts its a trial version just like the sencha architect. Am really confused on how the sencha app should be developed.
I want to know the tools that sencha developers are using so that I can deploy and debug effeciently.
Thanks in advance.
The workflow / tools choice when developing an application is a subjective matter so I'm going to talk about my experience, having been a Sencha Touch developer for the last year.
I find it really hard to find typo and errors in my code.
...
Am really confused on how the sencha app should be developed.
This is not a matter of tools in my opinion. Sencha Touch has an unavoidable steep learning curve. You should start with simple examples, and you could ask here when you have specific programming issues (I personally found Sencha Touch forums less useful than stackoverflow).
The most important thing is understanding the basics concepts:
Sencha Touch class system (http://www.sencha.com/learn/sencha-class-system),
How Sencha implements MVC (http://docs.sencha.com/touch/2.2.1/#!/guide/controllers)
(http://docs.sencha.com/touch/2.2.1/#!/guide/views),
Sencha Touch Layouts (http://docs.sencha.com/touch/2.2.1/#!/guide/layouts),
Sencha Touch Components (http://docs.sencha.com/touch/2.2.1/#!/guide/components)
Also all of these guides will be very useful, make sure you understand them and learn to use Sencha Docs, which definetely has some obscure, non explained properties, but should still be your main resource when developing a Sencha Touch app.
Debugging will always be tricky, unfortunately sometimes setting the wrong property on a Component, or misunderstanding how a Component is meant to work, ends up with some obscure var is not defined error. Do not fear to check Sencha Touch source code when this happens, code is well written and usually easy to understand.
Here the tools to use are again Sencha Touch Docs (when hovering on a class title you can examine directly its source code, plus your browser debugging console. Use frequent console.debug() messages, and when something weird happens inside framework classes stop execution with debugger; and step inside source code).
Now back to your question: I have been using the following tools:
NetBeans,
Chrome DevTools,
Chrome Ripple Extension,
Sencha Command (optional)
Compass CSS authoring framework
a couple shell scripts
The IDE is a matter of personal choice, Netbeans has some nice Javascript suggestions: it highlights variables when they are used but not defined in the current scope, or defined but not used, which really helps a lot against typos. It is very heavy in terms of memory usage. I guess Eclipse, or even a lighter one could be equally good.
Chrome is kinda a forced choice if you are on Windows, their DevTools are excellent, make sure you master them, they will be your main working tools. Once again: lot of RAM helps.
Ripple is an invaluable extension that allows you to test your mobile app on different devices and if you are using Phonegap for native deployment it emulates a part of its API on the browser.
Compass is the tool suggested by Sencha to compile their sass files. There is a detailed tutorial on how to setup compass on Sencha Docs.
I have been using Sencha Command but it's not strictly necessary, if you don't care about resources minification (but you should) you will not miss much about it. If you are developing a native app you can make up for the lack of Sencha Command deploy function with a simple shell script that copies html/js/css resources to the assets folder of your Phonegap project.
Another script activates automatically compass watch on the /resources/sass folder at startup, to avoid having to manually do that each time.
Just my two cents, hope it helps.
Anubis covered majority of the bee knees in hand coding Sencha Touch.
I'd like to add a couple more cents into the kitty.
My personal preference for IDE is Sublime Text. Searching through entire projects of code for anything, I've not seen an equal for effectiveness and speed. You can customise everything - especially colours and keybindings. It also has a ludicrous wealth of plugins, including working in correlation to Chrome, as well as Github.
SENCHA GUIDES
Miami Coder Tutorials - great collection of practical tutorials which will help you understand development patterns faster than most other guides. Great for starters.
Figleaf Training can be a little unconventional, but a great free means of learning Sencha Touch and almost everything it is capable of. Great for starters too.
Druck IT - solid collection of guides and ST information. Has links to many other useful sites such as these listed.
Mitchell Simoens - Mitchell is Sencha staff, a quality coder, and his site has some great advice and snippets to help learn. This is where you'll truly learn how to code ST well. Helps towards getting a grasp, but mainly for mid+ knowledge.
Ladysign - one of the Sencha Trainers. Has content that clears up "how to" in many facets other sites and books never even mention. Quality information. This info will get you above basic and flesh out your knowledge and understanding.
Modus Create - Jay Garcia is one of the devs of ST. Modus Create is his enterprise, which contains some useful guides within the blog.
Custom Font Icons - complete guide for 2.2. Very useful.
There's a few other sites that were incredible sources of tidbits through to information on how to code ST professionally. These links above will help immensely though. Above all, read the source code. It is very well documented, as well as being an example in itself of how to use the code. I have learnt ludicrous amounts this way.
GRUNT (with NPM/Node.js)!
Use Grunt! This will automate the vast majority of what you want to do. For example, typing "grunt" in the command line could jshint/jslint your code, concatenate all .js files together, all css files together (including all the compass joy), obfuscate, compress, run a comprehensive set of unit tests (especially Phantom), output to desired location, then add a cherry on top by refreshing your browser window. Add in the grunt watch plugin, and it'll do that every time a file is saved in defined directories. Any bugs in your code - you get accurate specific line numbers where it is broken.
The beauty of grunt is extended by optional alternate commandlines for different tasks. Also, you can specify in the package.json file of a few kB the precise list of plugins you wish to use with the gruntfile you've created, saving megabytes of file transfer. NPM can process that file, and download and install all that is required to operate. Makes for fast setup on another computer.
Side note: Touch Node has come of age. This permits all ST's class structure to develop your serverside javascript.
Want to include Sencha Cmd?
Sencha Cmd (finally) does do a decent job of collecting only the dependent classes from the full library.
grunt-sencha-build
grunt-senchacmd
Alternative for Sencha Cmd
Extend Grunt with Matt Goldspink's grunt-sencha-dependencies which works for both ST and ExtJS, or use grunt-sencha-resolver - this latter one I haven't used.