Architecture of an Angular application

foreign [Music] ER is a framework for building web applications so let's start by reviewing some concepts of these applications web applications have two components the front end that runs on the web browser and the back end that runs on a web server the front end is where the application actually runs and is the path that the user interacts with also it has the user interface maintains the state of the application and handles the business logic the back end is where the services that serve the front end are located the business logic is validated and the data is obtained from the database web applications have evolved since their first implementation from almost static pages to Applications with Rich content and interactivity to increase interactivity with page controls Ajax technology emerged that allows some things to be resolved on the client without the need for the request to travel to the server this was followed by the emergence of single page applications Spa one particular feature of these applications is that in response to user interactions the page is not reloaded again instead only the necessary part is updated providing a smoother user experience more recently Progressive web applications pwa have emerged which are web applications that provide access to hardware and software resources of the machine as if they were Native applications and can be installed on desktop or mobile devices and what is angular angular is an open source JavaScript development framework created by Google which is used to generate front-end web applications in particular single page and Progressive web applications angular is programmed with typescript which is a superset of JavaScript that adds data types to it among other things so ultimately it's JavaScript that runs in the browser this framework specializes in increasing the speed at which the web page is drawn to the browser that is to say rendering which makes it ideal for front-end applications that are end user oriented in other words customer facing applications to have the screen drawn quickly angular efficiently handles the Dom document object model which is the hierarchical structure of objects that's generated by the browser when a document is loaded it can be altered using JavaScript to dynamically change the contents and appearance of the page as single page applications and pwas are heavy and increasingly complex efficient Dom management is very important this is achieved through Dom virtualization and then updating the actual Dom very quickly there are other front-end web Frameworks such as react or vue.js that also provide efficient Dom management but they only cover part of the development on the other hand angular is a complete solution that in addition to the logic for Dom management includes component management libraries for navigating the application management of the state of the controls on the screen and communication mechanisms between the client and the server a front-end web application has the following three layers or elements the user interface which is what the user sees there the screen elements or controls coded in HTML with the appearance definitions written in CSS styling when the user interacts with this user interface events are generated which cause changes in the page content component this is the code that reacts to the events of the user interface elements that is where the behavior of the UI controls is programmed this layer is also responsible for maintaining the state of each control and its code is programmed in typescript or JavaScript connector it acts as the representative of the server on the client what it does is to ask the server for data and in some cases it can persist them to minimize Communications with the server now let's see how the genexis angular generator builds each of these parts web components are used to generate the user interface web components are a w3c standard that allows us to encapsulate HTML JavaScript and CSS in HTML tags defined by us this means that we can extend the HTML and create our own tags based on elements that run natively in all browsers for example we can create our own button with its style and behavior which is encapsulated in a web component and then we can use it in other Web projects or distribute it for others to see it's a new way to componentize on the web and make components portable the genexis API library is used to implement the behavior layer these apis are general purpose functions such as character handling date functions and so on which used to be generated in a specific code of each generator and are now implemented in typescript and JavaScript so that they can be reused in all generators including angular for the connector the XML HTTP request object is used which is a JavaScript object designed by Microsoft and adopted by Mozilla Apple and Google it's currently a w3c standard and allows you to refresh a web page without reloading it request data from the server and receive data from the server after the page has been loaded and send data to the server in the background the basic building block of an angular application is called a component each component consists of three parts that map the layers of a front-end application and they're represented in three files that are created by the angular generator the user interface definitions are stored in a file whose name ends in dotcomponent.html this file is generated by genexis and contains the web components that Define the HTML template and the user interface style definitions the associations of the UI elements with the corresponding data in the database are also included the component that defines the behavior and state of the controls is stored in a file ending in Dot component.ts the behavior and state of the controls are programmed there in typescript using the genexis API Library the connector that communicates with the rest Services of the web server is generated in a file ending in Dot service.ts and genexis uses the HTTP client to implement these communications using the XML HTTP requests for each panel object generated these three files will be created with names consisting of the name of the object to be executed followed by the extensions that are displayed on the screen one question we can ask ourselves is when we should choose angular to generate our web application one possible scenario is when we need to develop a customer facing front-end web application as we saw angular is designed to have a good performance in these cases of user interfaces with high interactivity requirements another case in which angular development is the right choice is when we're sure that after the web front end we will need a native mobile front end in this case the panels created for the angular application can be reused to generate the Android or iOS application defining the layouts corresponding to the devices we're going to use angular can also be used when we've already developed a native Android or iOS app with genexis and we need a web front end this case is similar to the previous one since the same objects can be used changing the layout design for web and then generating the same application we had in angular another case in which it's useful to use angular as a generator is when we want to integrate applications coded manually in react vue.js or angular with services or applications developed in genexis in this way if there's a team of developers specialized in the use of these Frameworks they can continue to build applications in their tool but the entire back end can be developed in genexis and integrated to the front end in the following videos we'll see how to develop web applications with a genexis angular generator

Channel: GeneXus Training

Views: 7,423

Keywords:

Id: laicOZbQRMY

Length: 10min 32sec (632 seconds)

Published: Tue Jul 11 2023