devon4ng introduction - Jorge-Dacal/devonfw-tutorial-sources GitHub Wiki
Created to support the development of Angular applications, devon4ng includes Google Material Design as main visual language to take at maximum the advantage of Angular possibilities and Material components, making possible the building of modular, well-designed, responsive front-end applications.
devon4ng works on top of Angular but also, it provides several tools, libraries and code conventions to make your Angular apps easier to develop based on the following technologies:
-
Angular Framework as the main development framework
-
Google Material2 as visual language and components.
-
Covalent Teradata as Component and utilities library working with Google Material.
-
Yarn as Project dependencies management tool.
The main advantages of this technologies are:
-
Teradata provides:
-
4 available layouts that fits nowadays design necessities.
-
Several tools and utilities regarding style conventions such as text size, padding, margins…
-
Complex components as: Data tables, Chips with autocomplete, pagination…
-
-
Google Material component library is composed by a number of fancy components like tabs, cards, buttons…
-
Yarn is quite faster than NPM and provides some more functionalities to manage dependencies.
There is no integrated IDE with the framework, that means you are free to work with whatever IDE fits better with you. Event though, we fully recommend the use of Visual Studio Code, along with a Guide of the most interesting plugins to make even easier your development with Typescript and Angular.
This CLI helps the developer to automatize some common processes. It comes with Webpack as main bundler. It is widely used in the Angular community thanks to the boost of productivity it provides at the time of creating new projects from scratch, serving and testing the project, creating new components, services, directives…
As Angular is the main framework for devon4ng, the architecture of the applications that is going to be used is the same as Angular:
This architecture will be enhanced with some functionalities from Covalent Teradata and Angular Material:
-
Theming: functionality that Angular Material includes in its library and Covalent Teradata extends, it declares one primary color, one secondary color and one color for warning and alerts to be used in all the application. Also Covalent Teradata expects a color for the background and another for the foreground. This colors will be stored in one theme, where you can store as much as you want and be changed at the run-time by the user.
-
Flex-box: Along with other CSS Utility Styles & Classes, Covalent Teradata comes with flex-box, useful for styling and organizing components inside of a view, which also has been extended by Covalent Teradata to achieve responsiveness. You can declare styles that change, hide or transform the component depending on the screen resolution of the device.
In the following chapters we are going to see an example of a finished devon4ng application, how to build your own devon4ng app from the scratch and all you need to know about each part of the architecture in order to start building your own applications.
Next chapter: An devon4ng application