Create Effective Project Architecture with Angular, Grunt, and NodeJS

Database_tuning_practices

Front-end technology is developing fast and excellent architectures are emerging. This blog does not compare architectures or whether one framework is preferred over another but provides an efficient methodology to create a mature architecture.

Functions of a Mature Project Architecture

The following diagram highlights the functions of a mature project architecture:
1_jpeg

Let’s discuss this architecture one by one in detail:

Project Builder

Efficient project builder quickly generates the main architecture of a project and automatically generates View and Controller in one step based on Router.
I have released the project builder to the NPM public module. It is only for reference and does not involve any company's product code.
*Note: By default, the project builder requires any system environment that supports Sass and Compass compiling. If the project builder cannot run successfully, check whether your system supports such an environment. Of course, you are welcome to discuss any problems with me.
Quickly generate the project architecture:

yo webbp

Run the command as prompted. When the project architecture is generated, open the project directory and run the npm install and grunt commands to automatically enable the browser to view project items.
Generate Controller in one step:

yo webbp:controllers detail.about.contact

The following files are generated:

|controllers
|detail
  |about.js
  |contact.js
detail.js

The generated about.js and contact.js are automatically loaded in detail.js.
Generate View in one step.

yo webbp:views detail.about.contact (no dots in between)

The following files are generated:

|views
   |detail
      |about.html
      |contact.html
    detail.html

Generate routes, which automatically associates with View and Controller:

yo webbp:routess detail.about.contact (no dots here)

This command automatically calls Controller and View commands.

The following are the generated routes codes:

define(['./states', '../cons/simpleCons'],
    function (stateModule, simpleCons) {
      stateModule.config(
          ['$stateProvider', '$urlRouterProvider',
            function ($stateProvider, $urlRouterProvider) {
              $stateProvider.state("detail", {
                abstract: true,
                resolve: {
                  instanceBasicPromise: [ '$stateParams', function( $stateParams){
 
                  }]
                },
                url: "/detail",
                controller: 'detailController',
                templateUrl: simpleCons.VIEW_PATH + 'detail.html'
              })
 
                .state("detail.about", {
                  url: "/about",
                  views: {
                    detail: {
                      templateUrl: simpleCons.VIEW_PATH + 'detail/about.html',
                      controller: 'detail.aboutController'
                    }
                  }
                }) 
 
            }
          ]);
    })

The Controller and View files are automatically generated.

Static Resource Management Based on Bower

The project introduces AngularJS, jQuery, and Bootstrap, which manage dependencies based on Bower.
I have also released a simple-form extension based on Angular forms. It is the most convenient Angular forms to use and supports form-based model configuration, data submission using form-Data, and bi-directional binding of View. Use it and you'll see how easy it is! Let me know if you find any bugs.
Also, I have written an article[2] that focuses specifically on simple-form.

CSS Dynamic Compiling Based on Sass; Compass Achieves CSS Nesting and Cross-Browser CSS Prefix.

This is common knowledge, and people prefer to use these modules. Another module you must know about is LESS.
Achieve nested compiling:

.block-a{
  .block-b{
      .block-c{}
  }
}

Achieve cross-browser compiling:

Various prefixes on the browser are very difficult to configure. It is much easier to use Compass to compile various CSS codes that can be recognized by all browsers.

div{
  @include border-radius(4px);
}

It’s easier to compile CSS codes and define variables as compiling JS codes. Google it for more details!

Decoupling and Modular Development Based on RequireJS

I'm glad that more and more front-end codes are being developed and that we are no longer art designers cutting pages.
Unfortunately, we'll never know when to stop work every day. Our workload increases when another item diminishes.
We can no longer put as many codes as we want into one bigbig.js file. To manage codes efficiently, we must separate, decouple, and modularly develop them. How do we deal with dependencies among a.js, b.js, and c.js? You can use SeaJS, RequireJS, Browserify, etc. or compile a simple java script. I prefer to use RequireJS.

Architecture Achieves View-Model Bi-directional Binding Based on Angular

Creating additional architectures repeatedly is not recommended, but there are always new and brilliant architectures emerging. Technology development is impossible without innovation. My project builder is based on Angular. It does not support Internet Explorer (IE) 6 or 7. There are many advantages to using Angular. For example, it supports bi-directional binding, dependency injection, and MVC, as well as uses Directive Syntax to extend HTML tags. Using Angular, you can manage your work with only a few lines of code as compared to other architectures that require heavy coding.

Code Management Manages Code Versions Using Git; Introduces Public Modules Using Git Submodule.What is the difference between Git and SVN?

Git is distributive, while SVN is not.
Git stores content based on metadata, while SVN stores content based on files.
Git and SVN have different branches.
SVN has a global version but Git does not.
The content integrity of Git is better than that of SVN.

Besides these differences, there are many other advantages of GitHub because of which majority of people prefer to use Git. Moreover, you can use the Submodule tool in Git to efficiently initialize, update, or inspect Submodules. This tool is also suitable if you have multiple sub-projects and need to extract common components.
Locally Mock Data Supports GET and POST Request Simulations Based on Express Extension.
Separating front-end from back-end facilitates collaborated development and improves efficiency. However, it requires simulating back-end interfaces locally. Before being able to use NodeJS, I use the WAMP architecture and enable the server services locally. NodeJS is developing at such a fast pace that various automated tools can be developed based on it. Therefore, based on the Express extension, I tried to mock GET and POST requests in this project builder. You can also simulate interface delay.
Locally mock GET and POST requests:

Call the HTTP service in:

|--tests
     |-- home.json
and in:
|--services
   |--homeService.js
The interface URL is /home.json.

Simulate the interface delay

You can modify the URL to simulate the interface delay and change the delay time in /server/route.js.

Package, Compress, and Go Live: Package and compress project files based on NPM module, modify it, and refresh page from time to time.

The last step after developing the project is to package and compress the project files and make the project available online. This step is automatic, so we only need to run the grunt build command in the generated project and release the build file to the online server.

Conclusion

This is how you can use Angular, Bower, Grunt, and NodeJS to create a project architecture in an efficient manner. This project builder should satisfy more than 80 percent of your development requirements. I also recommend you to try Simple-form for form-based model configurations.

Community

Create Effective Project Architecture with Angular, Grunt, and NodeJS

Functions of a Mature Project Architecture

Project Builder

Static Resource Management Based on Bower

Decoupling and Modular Development Based on RequireJS

Architecture Achieves View-Model Bi-directional Binding Based on Angular

Simulate the interface delay

Conclusion

Read previous post:

Read next post:

Alibaba Clouder

You may also like

Comments

Alibaba Clouder

Related Products

Architecture and Structure Design

DevOps Solution

Intelligent Advisor

SOFAStack™