Angular Rapid Development
Tommy Cresine
Automate All The Things
Learn Gulp & Slush
- Gulp is a code over configuration task automation framework as a replacement for Grunt. It has significant improvements to performance by utilizing Node streams.
- Slush is a scaffolding tool using Gulp as a replacement for Yeoman.
- Using these tools will help you write better Javascript in the end. Rather than configuring a giant object to do all that work for you without understanding how it's really working.
What Gulp Should Do
- Lint your code
- Run tests
- Process your stylesheets (LESS, SASS, etc)
- Inventory and inject application files and bower dependencies automatically for you.
- Process your templates as jade, insert them into template cache
- Process management via PM2
- Live reload
And much more.....
PM2
A process manager for Node.js that provides robust management tools and a built-in load balancer.
- List your processes in one JSON file (api, mongo, etc).
- Programmatically start and interact with your processes.
- Streaming logs in a separate prompt `pm2 logs`
- Automatically restart on fail or file changes.
Structuring Your Project
Within your app there should be 2 types of modules:
State
Component
- States represent applications states using ui-router or even the new angular router when it comes.
- Each state has it's own controller and configuration.
- Components are any reusable component. Treat everything like it's reusable.
- It's better than putting overly complicated nesting within modules and creating circular dependencies.
- If it's not a view state or controller for a view state it should go here (directives, services, filters).
Bird's Eye View
Components Structure
States Structure
Next Steps
- Utilize nested states and resolves for working with data. Keep controllers thin.
- Self aware models are the best way to go (Restangular).
- Always continue assessments and improvements to development pipeline and/or scalability of your application.