Applications factory with angular and ionic

Updated:

• Angular: 4.0.2
• Ionic: 3.1.1
• Angular-cli: 1.0.1

Notes: Some classes names and code has changed from first code version, that was published in this blog. Look codes to see changes

One of the main problems I've ever seen, when I try to make an user interface web project is very difficult makes reusability code. The main problem, in my opinion, is that the web interface from the beginning, hasn't grown up with languages ​​and framework designed to reuse. Instead in the backend languages ​​and backend frameworks are designed to reuse, it's the case of frameworks like spring and java. In these framewoks, there are many tools that allow you easily to reuse code.

We should make applications,  how cars are built in a factory. We should create many modules (cores) and after assembling them in ours applications.

Today this is changing with respect to the web user interface, and personally a project that I like, and that is oriented to build reusables applications is angular2.

In the following example, I will show how easy it is to make a reusable application with angular and ionic.

The example allows management an aquarium. In this case, I will automate the process of CRUD operations of aquarium entities. For the automation of these operations, will have two pages. A page that allows me to list the aquarium entity. I will be able create a new aquarium entity, select it for editing, etc. And another page allows update and save the entity.

As we shall see, automating all processes involved in CRUD operations, it allows me to build a factory of management of any aquarium entity, as fish management, etc.

In this sense. I could have two profiles in my company:

• Functional programmers:  Dedicated to make code to resolve problems of the domain (aquarium). Funcional programmers assembles core modules and focus only in the domain.
• Platform (core) programmers: Dedicated to make general code to resolve platform problems. In my example, automating all processes involved in CRUD operations.

As I have commented above, I will have two functional pages:

The first page allows list aquarium entities to create a new aquarium entity and select it for editing:

The unique typescript or javascript code that the functional programmer has written in the first page is the next:

The rest code is html (web designer):


 

The green rectangles are classes created in the core. 

The final result for this page:

The second page allows edit the aquarium entity and saving.

The unique typescript or javascript code that the functional programmer has written in the second page is the next (basically validations):

  
The rest code is html (web designer):



The green rectangle are classes created in the core.

The final result for this page: 

 

Some of the advantages that we can get when we reuse code using a code core:

• Reduce time and costs.
• The complexity of the test is in the core. How we can see in the figure, all code that is at the core (orange rectangle) is not need re-write in the tests of the functional (domain) code.

• Almost all the functional code is html (declarative). We can have our killer porgrammers working on core. 
• The functional programmers are focused in the domain problems.
• The functional code is made by designer web (better user experience).
• Fewer bugs.
• Reuse core code in diferrent projects.    
   

 

For more details see the code