App Start

In this chapter we will explain what happens when someone runs the migrated application for the first time, moreover, what happens in both back-end and front-end while doing so.

Now, suppose that you have just run a recently migrated application, and the browser shows the first screen. The image below shows the main required steps the application goes through before loading that first screen.

Up next, we are going to explain each step:

1. Weaving mechanism

Weaving is the process of inserting or modifying the application code during the compilation process, but in a way that the developers do not have to worry about these modifications.

Weaving mechanism can improve performance, compared with others interception solutions, because it will add little overhead during runtime.

Weaving can be done by adding or modifying the existing .class files at compile time, load time or runtime.

At the beginning, the server executes code to ensure the weaving mechanism executes database connections through DataAccessInterceptor.

  * Pointcut for all the methods marked with the @DataAccessManagement annotation.
@Pointcut("execution(* com.mobilize.jwebmap.dataaccess.TransactionAwareJdbcTemplate.execute(..))" )
public void executeInvoke() {
// Pointcut definition, no code required

Also, the weaving mechanism runs all the controllers tagged as @WebMAPController. For example:

  @RequestMapping(value = "/{control}/{event}/{uid:.+}", method = {RequestMethod.POST}, produces = MediaType.APPLICATION_JSON_VALUE)
  public @ResponseBody IWebMapResponse start(
      @PathVariable String control,
      @PathVariable String event,
      @PathVariable String uid, String requestBody) {

2. Dependency injection

The dependencies manager is loaded at the beginning of the application through a spring software principle call IoC (Inversion of control). This principle creates a container that manages the object instances during the execution of the application.

3. Instantiate AppComponent

After the web host launches the index page, this index will start looking for the angular component that matches with the app-root HTML tag. This component is located in the app.component.ts, and it will initialize the WebMapService.

4. Send AppStart action to the server

At the end of the initialization of WebMAPService, this service will send the "AppStart" request to the server side.

5. Call Main Entry Point of the Application

When the "AppStart" request passes through the startApp method of the WebMapHomeController, the main method in the application is invoked.

6. Process Request and Response

The server uses the WebMapSingleController as starting point to process every request. The start method gets the parameters for the method (getJsonParametersFromRequest), and the corresponding control to find the method to execute (getMethodToExecute). This is accomplished by a reflection process.

The WebMapResponse is in charge of storing all the returning data that will be send to the client side. When the request is finished, the ReturnObject is transformed into a JSON object with the required structure to be performed by the client.

7. Process Response

When the response arrives at the client side, the Frontend application starts calling the WebMAPService in order to process the response. Basically, the WebMAPService processes the arrays of Added, Changed and Removed observables.

  • For the Added observables, it adds them into the Frontend application's observable buffer.

  • For the Changed observables, it synchronizes the delta with the existing mirror observable located in the buffer.

  • For the Removed observables, it also removes the observables from the buffer.

Once the WebMAPService process is done, the application starts refreshing the values in order to show the response's result in the corresponding angular components.

8. The app's initial state is fully loaded

Finally, the application will show its initial state, and the first screen is showed.