Web Apps UI Development Trend in 2020: Components to Rule Them All

Dr. Lofi Dewanto
Jan 2 · 7 min read

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?

Image for post
Image for post

Web Apps Design Trend

Following Web frameworks have gained big traction in 2020: Vue.js, React and Angular. All browser-based apps use JavaScript as their programming language. In Web browser world JavaScript is still the king, because Web APIs are based on JavaScript. Although today we have the so called transpilers which could translate one source code (e.g. Java) to another source code (e.g JavaScript). A comprehensive list of transpilers to JavaScript can be found here.

Vue.js got a lot of traction in 2020 because it should be lightweight. You can use Vue.js easily in your current Web app and add features incrementally as you go. To add a small progressive upgrade to your Web app is quite easy but if you are going to write the whole Web app with Vue.js you need to understand the basic things. Modularization and componentization are some concepts you need to learn before. How do you design your Web app in Vue.js version 3? You still build a HTML file as the main UI file. If you need to have a nice UI you also need a CSS file. Then you build components in JavaScript which have attributes / data and behaviors / methods and events. The components can be inserted in the HTML file to build a complete Web app. Below you see the component <twoway-textfield> inserted two times into the index.html file.

Image for post
Image for post
HTML, JavaScript and Preview in the Browser

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.

Image for post
Image for post
Vue.js SFC: Hello.vue (Source: Vue.js Doc)

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.

Image for post
Image for post
HelloMessage React Component with JSX (Source: React Doc)

Without going into detail, React concepts with declarative UI, components / composites and single file components are very similar to Vue.js A comprehensive comparison between Vue.js and React can be found here. One thing you need to be aware: JavaScript UI framework like React with JSX needs build tool, transpilers, generators and a server process in the development time. So the time for just editing a JS file and reload the browser for Web apps development is already over.

Angular has experienced a huge reworked as it moved its programming language from JavaScript to TypeScript. Angular has a very clear introduction process with all the needed tools. If you don’t like to choose all the tools by yourself, Angular could be the best choice for a complete development of Web apps. However if you just need to add simple extensions in your current Web pages, Angular is maybe not for you. But how do we develop the UI in Angular?

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.

Image for post
Image for post
Heroes Web App with Angular (Source: Stackblitz)

A good comprehensive comparison of the three UI frameworks can be read here. A good side-by-side explanation about Angular and React components can be found here.

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.
  • Declarative and Component based UI development: We still use HTML and CSS for the UI design, no change about this. React, Angular and Vue.js use declarative instead of imperative rendering. Additionally all of them support component / composite development, so that you can reuse those components in your Web apps. A trend is also to be able to put attributes / properties, logic / methods / behavior / events, data and template for a component in a single unit (a JavaScript file). In object-orientation this is called encapsulation.
  • 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!

My best component and UI development experience so far was with Borland (today embarcadero) Delphi and VCL (Visual Component Library). Why? Two points:

(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.

The Startup

Medium's largest active publication, followed by +756K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store