Chapter 4 User InterfaCe DesIgn functional modules referred to as presentation components (widget or portlet), which help in managing development of a complex application. This technique lets you take advantage of lazy loading, that is, loading modules on demand in order to minimize the amount of code that needs to be loaded at startup. UI architecture is built on the MVC or MVVM architectural pattern. MVVM is recognized as a web architectural-based pattern. • The model represents the data and binds with the view. • The view is where you represent UI elements, for example, textboxes, buttons, input, etc. • ViewModel represents the UI-related logic where you can do conditional checks or update certain parts of the web application. As shown in Figure 4-8, the model will bind with View (HTML template) and ViewModel (components’ scripts). Events fired in the view can be recognized in a components’ scripts and any change in a components’ script will be reflected in the view or vice versa. This will help you to maintain the state of the application; in this case you have control over your business logic on UI. Figure 4-8. Component architecture 131