Saturday, July 08, 2017

Oracle Jet - understanding the MVVM application design pattern

Oracle JavaScript Extension Toolkit (Oracle JET) is a complete yet modular JavaScript development toolkit helping developers build engaging user interfaces. Based on industry standards and popular open-source frameworks, Oracle JET further adds advanced functionality and services to help developer build better applications faster.

Oracle Jet revolves around the MVVM model, MVVM is the short version of the View, View Model, application design pattern  (I know the MVVM is not in line with the long version). The application design pattern is shown in the below diagram:



The MVVM application design pattern is not something that has been developed by Oracle, it is rather a generic application design pattern adopted by many vendors and applications when developing modern day web and mobile applications.

Some of the benefits of the MVVM application design pattern are that the application can be developed in a very component based manner with a strong REST API based backend and allows for less data transactions between the server side and the client side. By doing so the applications become, in general, more flexible and faster while requiring less server resources.

Breaking it into layers:
Within the application design pattern we see the following main parts:

View: as in the MVC and MVP patterns, the view is the structure, layout, and appearance of what a user sees on the screen. With Oracle Jet this will be mainly the Alta UI.

ViewModel: the view model is an abstraction of the view exposing public properties and commands. Instead of the controller of the MVC pattern, or the presenter of the MVP pattern, MVVM has a binder. In the view model, the binder mediates communication between the view and the data binder.The view model has been described as a state of the data in the model.

Model: model refers either to a domain model, which represents real state content (an object-oriented approach), or to the data access layer, which represents content (a data-centric approach).

The Oracle JET framework supports two-way data binding between the View and Model layers in the Model-View-ViewModel (MVVM) design. Data changes in the ViewModel are sent to the UI components, and user input from the UI components is written back into the ViewModel. For this Oracle Jet uses knockout which is an opensource project that can be found at the knockout website

No comments: