Vaadin & Single Page Application (SPA)

Progressive Web App

bbv Software Services AG | www.bbv.ch 15.10.2019 1

 Single Page Application (SPA)
Single Page application (SPA) is a web application that fits on a single page. All the necessary codes are retrieved within a single page load and navigation between pages
performed without refreshing the whole page. Most of the interactions happen on the client side without any need to reach the server.

Web browser JavaScript frameworks, such as Angular, React have adopted SPA principles.

Single Page Application is good for making Responsive Websites, Support mobile, Tablet & Desktop.

There are no extra queries to the server to download pages.

SPA is user-friendly.

SPA supports various interactions with multiple components which have many intermediate states.

bbv Software Services AG | www.bbv.ch 15.10.2019 2

Progressive Web App Checklist
Vaadin PWA SPA PWA
Functions offline

Push notifications

Installable on home screen

Full screen experience

Indexable by search engines

Works across all devices

Low data requirements

Mobile specific navigation

bbv Software Services AG | www.bbv.ch 15.10.2019 3

 Vaadin – Pros & Cons
Pros

• Flat learning curve due to monoglot programming (only Java)

• Well known imperative UI programming paradigm
• Web-specific issues are transparent for developers
• Comprehensive and sophisticated component set and data binding mechanism
• Good documentation and active community

Cons

• Doesn’t scale well in comparison to other architectural approaches. Higher load on network and server (memory, processor)
• Unsuitable for fancy GUIs.

bbv Software Services AG | www.bbv.ch 15.10.2019 4

 Angular – Pros & Cons
Pros

• Large community support.

• Structure and architecture specifically created for great project scalability
• MVVM (Model-View-ViewModel) that allows developers to work separately on the same app section using the same set of data.
• Dependency injection of the features related to the components with modules and modularity in general.
• Two-way data binding that enables singular behavior for the app which minimized risks of possible errors.
• Extending the functionality of HTML attributes with Directives

Cons

• Variety of different structures (Injectables, Components, Pipes, Modules etc.) makes it a bit harder to learn.
• Relatively slower performance, according to different benchmarks.

bbv Software Services AG | www.bbv.ch 15.10.2019 5

 React.js – Pros & Cons
Pros

• Easy to learn with simple design.

• Extremely fast, courtesy of React’s Virtual DOM implementation and various rendering optimizations.
• Support for server-side rendering, making it a powerful framework for content-focused applications..
• Functional Programming (FP) concepts, creating easy-to-test and highly reusable code.
• Migrating between versions is generally very easy.

Cons

• Mixing templating with logic (JSX) can be confusing for some developers at first.
• Moving away from class-based components, which may be a barrier for developers more comfortable with Object Oriented Programming (OOP).

bbv Software Services AG | www.bbv.ch 15.10.2019 6

 Angular vs React Comparisons
Angular React.js

Performance Impactful performance for larger pages with two-way data binding. Faster performance for small data sets or small pages. Slower
performance for larger pages as React.js doesn’t support data
binding.

Architectural Performance MVC architecture with two-way data binding to drive application MVP architecture without data binding process.
activity.

Performance-based on Templating Dynamic HTML attributes to make an easy to understand Underscore templates which are not as fully-featured as those
application at a functional level. offered by Angular.

Performance Testing Performance testing is more preferred in Angular than React.js. Mainly provides swift testing experience for a single page or
Mainly in case of large application, testing is smoother through smaller applications. For big or multi-paged applications, it is
this framework. less preferred than Angular.

Support and Performance Upgradation Large community support and extensive documentation libraries. Under Facebook license and thus has one of the largest
It is also backed by Google. community supports.

Data binding Performance Implements a two-way binding process and thus it is a bit complex Simple and easy API than Angular 5.
than React.js.

Performance-based on advanced Features Mainly focuses on valid HTML and dynamic elements that mirror Works on direct DOM manipulation approach to represent
the underlying data to rebuild the DOM as per the specified rules. changes in data and application architecture.
It then works on the updated data records.

bbv Software Services AG | www.bbv.ch 15.10.2019 7