Angular
JS
Scaffolding
ENTERPRISE
SPA(s)
Organize Your Project
- Use Full-Stac k Development
- Consider the (M)EAN stack
- Consider the (OC)EAN stack
Note: the Database layer is optional... You should still use NodeJS as a local app-server [for development] to proxy to your `real` server.
Consider the FULL STACK
Project Structure
Project & Tools
Using NPM
Using Bower
Using GRUNT
ORGANIZE YOUR Client Source
-
Organize by Features
-
Clean HTML
-
Use Bootstrap Process
-
Use AMD or CommonJS modules
- Use grouping AngularJS modules
The ZZA SPA
Zza Features
For these features (pink):
-
How to organize
classes ?
-
How to implement
features ?
-
How to import
classes ?
-
How to build & deploy the SPA
?
Typical Structure
Typical solutions used / seen online...
Organize-by-Features
Enterprise
Basic
<BASIC> ORGANIZE-BY-FEATURES
< Enterprise > ORGANIZE-BY-FEATURES
<BASIC> Messy HTML
< ENTERPRISE > Clean HTML
< ENTERPRISE > Using a Bootstrap Process
< ENTERPRISE > Use AMD Modules
Zza.js JavaScript file define( )s the start of the dependency tree
Use AngularJS modules to group AMD modules
Use AngularJS modules to
group
AMD
modules
All Customer code is now registered within the zza.Customer AngularJS module.
Open-Source on GitHUB
ORGANIZE YOUR NodeJS App-Server
- Considered an accessible middle tier
-
Organize with
Express middleware
-
Clean App-Server source
- Distinct Routing for REST API
Configure your NodeJS App-Server
Clean App-SERver Source
Distinct Routing for REST API
about ME
Thomas Burleson
-
email: ThomasBurleson @ Gmail.com
-
twitter: @ThomasBurleson
- blog: www.solutionOptimist.com
- code: https://github.com/ThomasBurleson
-
linkedIn: http://www.linkedin.com/in/ThomasBurleson
Need a senior, front-end architect ?
I am looking for the next great project...