Web Apps UI Development Trend in 2020: Components to Rule Them All
This is a second part of the article about UI (User Interface) development in 2020. Here is the first part: UI Development Trend in 2020: Declarative UI to Rule Them All.
Today I’m talking about Web apps UI development. As we have seen in the UI framework development history, we have moved from server-side UI development to the client-side or browser-side UI development. To be clear, Web browser represents the native app for many desktops today. With ElectronJS you can deliver your Web apps to the desktop for any operating system available. ElectronJS apps which are Web apps are platform independent. This is what I call Web Browser as a Platform (WbaaP). But how do we develop in our native Web browser apps in year 2020?
Web Apps Design Trend
With this mechanism you can build composite / nested components which can wrap another components.
If you come from SwiftUI development you will ask yourself why you do need three files (HTML for the main screen, CSS for UI design and JS for the components) just to build a simple Web app UI. To make it simpler Vue.js has following principle:
Inside a component, its template, logic and styles are inherently coupled, and collocating them actually makes the component more cohesive and maintainable — Vue.js Separation of Concerns.
One step further is the so called Single File Components (SFC). In this case a component can be defined in one .vue file. In SFC you can put the template, Look&Feel scoped to only this component and also the attributes / behaviors of the component in just one .vue file, just like what we already know from object-oriented UI design.
React is a famous UI framework not only for Web apps from Facebook. The idea of React is actually very similar to Vue.js as you also build components to be able to build a Web app. React has a speciality with JSX (Java Script Extension) which describes what the UI should look like. Here is a simple React component with JSX. The element id hello-example is just a simple
<div id="hello-example"></div> in the main HTML file, so the HelloMessage component will be injected into the main HTML file with the simple div above.
As a Java developer I feel that Angular UI development is very similar to all those Java based UI frameworks from Google, e.g.: Android and GWT. Angular also uses known design patterns like Dependency Injection, Service Pattern and Mock Test.
In Angular you also build components which consist of attributes, behaviors and template just like in Vue.js and React. Additionally you have “services” which consist the data you could get from other part of the app. In the Heroes example you can see how you can build a Heroes component.
Next Stop: Java Web “Browser” Apps
After seeing these three frameworks: Vue.js, React and Angular we can summarize following points:
- Toolchain for Web apps development: UI development for Web browser has moved from no toolchain to complex toolchain. You need a runtime process (Node.js), build / package manager (npm), transpilers (JSX, TypeScript, babel), webpack, etc. to be able to develop a simple but reasonable app for a browser.
- Programming Language: All the frameworks support TypeScript but only Angular uses exclusively TypeScript in all the examples.
- DSL (Domain Specific Language) for UI and textual based instead GUI designer based: The DSL based development for UI is only used by React with JSX. Angular and Vue.js use HTML as standard, no DSL for UI. All the frameworks use textual instead if GUI designer based development.
- Two ways data binding: Angular with ngModel and Vue.js with v-model offer directly two ways data binding, so an update in a data field will be synchronized to all the UI components which bound to this field and vice-versa. React doesn’t offer this feature directly.
- UI Look & Feel: L&F for Web apps is still implemented using CSS. In contrast to SwiftUI with Apple L&F or in Android devices with Material Design L&F, in which you don’t need to take care of the L&F because it is integrated directly into the framework. You can define your own L&F or use Web theme like Bootstrap or Material Design.
In the next article I’ll take a look at Web apps UI development in Java with GWT / J2CL. How does it look like in 2020 / 2021? Is it comparable with the three frameworks we’ve seen in this article? Stay tuned!
(1) Everything is visual: All components are visual. It doesn’t matter whether they are logic or database components, they are all visual components. As a user of the components you can always configure them visually.
(2) Components can be activated in development / design time: Components can be activated, sometimes with mock data, in development time. This means you as a user of the components don’t need to compile the whole app and run it just to see how the components work in the runtime. You can find this mechanism today in SwiftUI and Android Jetpack Compose.