Finding an efficient frontend library/framework compatible with the DH Visionary Cross project development lifecycle…

16 min readAug 15, 2022

_________________________________________________

Introduction to Visionary Cross project:

The Visionary Cross project is a multidisciplinary project whose aim is the development of new methodologies for the archiving and publication of texts and multimedia objects linked to the Visionary Crosses of Anglo-Saxon England.

ISTI-CNR collaborated with the project partners in two main activities: (i)The acquisition and production of high-detail 3D models of three important crosses; (ii)The creation of “high resolution digital editions” of the crosses whis is accessible via the web both by the public and by experts in the field for their studies. These three crosses are namely;

It uses and critiques newly developed digital technologies in the study of a collection of important Anglo-Saxon monuments and texts: the eighth-century Ruthwell and Bewcastle Stone Crosses from the kingdom of Northumbria, the eleventh-century Brussels Reliquary Cross and the late tenth-/early eleventh-century Vercelli Book poems “The Dream of the Rood and Elene from the south.” These objects, which are connected to each other along a number of cultural and functional planes, are key examples of an interest in the Cross that spans the history and geography of Anglo-Saxon England.

The different technologies and tools that are tend to use in the beta development of this project are listed as follows;

# 3DHop:

3DHOP (3D Heritage Online Presenter) is an open-source framework for the creation of interactive Web presentations of high-resolution 3D models, oriented to the Cultural Heritage field.
3DHOP allows the creation of interactive visualization of 3D models directly inside a standard web page, just by adding some HTML and JavaScript components in the web page source code. The 3D scene and the user interaction can be easily configured using a simple “declarative programming” approach. By using a multi-resolution 3D model management 3DHOP is able to work with high-resolution 3D models (hundreds millions of triangles/points) with ease, also on low-bandwidth. 3DHOP does not need a specialized server, nor server-side computation: simply some space on a web server, and does work directly inside modern web browsers, no plug-ins or additional components are necessary.

# MeshLab:

It is a 3D mesh processing software system that is oriented to the management and processing of unstructured large meshes and provides a set of tools for editing, cleaning, healing, inspecting, rendering, and converting these kinds of meshes. In non technical terms, while comapring with the 2d data it can be comapred as Photoshop for 3d meshes.

# Zenodo:

Zenodo is a general-purpose open repository developed under the European OpenAIRE program and operated by CERN. It allows researchers to deposit research papers, data sets, research software, reports, and any other research related digital artefacts. For each submission, a persistent digital object identifier (DOI) is minted, which makes the stored items easily citeable.

It provides a DOI to datasets and other submitted data that lacks one to make the work easier to cite and supports various data and license types. One supported source is GitHub repositories. It is run with Invenio (a free software framework for large-scale digital repositories), wrapped by a small extra layer of code that is also called Zenodo.

Analysis of user interface development cycle.

In this section we will specifically be taking over and review some aspects such as;

The architecture problems which might be encountered as the application scales.
How a front-end technology might help address these.

You can build a simple frontend with just three files: HTML, CSS, and JavaScript.

As is tradition, let’s look at a silly example: let’s say for example you’re building Ranker, a leaderboard for competitive board gamers. In this app, users can share the board games they’ve played, their league-sanctioned competitive results (there’s now a league, roll with it), and short reviews of competitive matches. The most important feature of the app is the user profile page.

You build the first version of this profile page with the three basic technologies, HTML, CSS, and JavaScript. It works something like this:

On the initial page load, the back end initially sends over a blank profile page with minimal styling. Then, and for all future loads, the front end requests user data via AJAX.
The back end sends over some public user data as JSON, and you use JavaScript to dynamically append DOM elements for game badges and records onto the page.
When you decide to build game-specific pages that list all the users and their records, you create new JavaScript files that replicate much of the code, since they’re drawing on the same game data.
Each game badge (and match badge) uses the same HTML, so you store the markup in a JavaScript string and figure out a way to inject game-specific data in there, ex: “<p>{{Game Name}}</p>”. Then, you append the badge HTML onto the page for every game.
When a user updates some value on the page, you can either read data from the DOM by querying for attributes, or by attaching event listeners to every element — getting the data by reading it from the DOM.

Suppose as this game gets popular and your dataset grows significantly, this approach quickly becomes unwieldy. Hence an architecture problem will tend to arise here as the application scales with time. Some of which includes as follows;

You find yourself appending data to the page and then reading it from the DOM by grabbing <div> values or reading ids or data attributes.
The number of JavaScript and CSS files balloons, and there’s lots of repeated code between them.
You’re binding event listeners to common UI elements like input fields and buttons, then writing functions to update the values in those same elements.
When you need to make even a small change, you worry about how it’ll impact the rest of the application.
When your friend offers to help with the development work (for some equity, of course), you spend hours explaining how your code works.

Managing these problems is feasible with vanilla JavaScript and requires enough patience. With planning and forethought, you might be able to structure your app to anticipate some of these issues. However, as your front end grows, these problems will only deepen — you can never be sure how your app is going to evolve. You realize that storing your data in the DOM and endlessly appending HTML stored in JavaScript strings can’t be the best way to tackle this project. Fortunately, there’s no need to reinvent the wheel. When you find yourself needing to build a robust, maintainable UI, it’s time for… you guessed it! A front-end framework/library.

Frontend technologies are the tools and programming languages that are used to create the user interface and experience of a website or application. It is the presentation layer of your application; It’s often described as all the stuff the user sees, but more generally, it’s any code that’s responsible for efficiently displaying data to the user. So, the front end includes building intuitive and pleasant interfaces, as well as efficiently storing, presenting, and updating data received from the back end or API. In recent years, there has been a trend towards using more advanced frontend technologies such as Angular, ReactJS and Vue JS. These frameworks allow for more complex user interactions and can be used to create truly immersive experiences.

This includes everything from the layout and design to the interactive elements and animations. Some common frontend technologies include HTML, CSS, and JavaScript. While each of these languages has its own distinct role, they all work together to create a seamless experience for the user.

Frameworks or Libraries?

A library is like going to Ikea. You already have a home, but you need a bit of help with furniture. You don’t feel like making your own table from scratch. Ikea allows you to pick and choose different things to go in your home. You are in control. For instance ReactJS.

A framework, on the other hand, is like building a model home. You have a set of blueprints and a few limited choices when it comes to architecture and design. Ultimately, the contractor and blueprint are in control. And they will let you know when and where you can provide your input. For instance Angular and Vue JS.

Technically when you use a library, you are in charge of the flow of the application. You are choosing when and where to call the library. When you use a framework, the framework is in charge of the flow. It provides some places for you to plug in your code, but it calls the code you plugged in as needed.

this section we will be comparing the most popular used frontend technologies and will conclude weather it allies with out development requirement.

# React Vs Angular

If the choice you’re making is based on Angular(developed by google) where as React(developed by Facebook, now Meta) alone, then you’ll simply need to consider the pros and cons discussed for those libraries in this post. But overall, keep in mind that both libraries can be used for mobile and web apps, while Angular is generally better for more complex apps that are enterprise-ready.

# How Angular is used?

Angular is one of the most popular JavaScript frameworks. Developed and maintained by Google, it is used to build modern Single-Page Application’s (SPA’s), and Progressive Web Application’s (PWA’s). When you start out a new Angular project, the process is fairly straight forward. You make sure you’ve got the latest version of Angular, you install Material, and you start implementing your design. Each individual project therefor has a similar structure and largely uses the same components. This implies that every project becomes similar in structure, have similar components, and typically very similar markup and code — Assuming the Angular developer knows what he or she is doing. Maybe you’ll need a handful of custom components for your project, but in general if you’ve seen one Angular project, you’ve seen “all” Angular projects. Therefore As a complete framework, it has everything you need for a JavaScript web application.

It provides opinionated architecture enabling full separation of concerns by dividing application structure between components, services, directives, pipes & modules. These are different types of class that provides unique characteristics and functionality. This architecture enables development that scales & works well in a large team. It provides the full MVC of web development. It provides built-in components and templates that enable advanced dynamic rendering, in addition to modules with the capability to use lazy loading to split bundle size & reduce the upfront main bundle size.

The most important and valuable features that Angular provides out-of-the-box are the Angular CLI, intelligent IDE tooling, dynamic rendering, templates, dependency injection, AOT-JIT, routing, animations, Universal Server-Side Rendering (SSR), testing, accessibility, internationalization, security functionality, PWA support, Web-Workers, and much more.

# How React is used?

React Architectural diagram using virual DOM

React library is built on a solid foundation. It is simple, flexible and extensible. As we learned earlier, React is a library to create user interface in a web application. React’s primary purpose is to enable the developer to create user interface using pure JavaScript. Normally, every user interface library introduces a new template language (which we need to learn) to design the user interface and provides an option to write logic, either inside the template or separately. If you did the above in angular exercise with React, you’d need to install dozens of components before you can even create a simple HTTP request and show a freakin’ date picker. Every single time you install a new component, you have a myriad of choices, resulting in that you’d rarely find two different React projects using the same set of components and plugins. The structure of the project is much more left up to you as an individual developer in regards to how you want your code and project to be organised. A JavaScript extension to design user interface. JSX is an XML based, extensible language supporting HTML syntax with little modification. JSX can be compiled to React Elements and used to create user interface.

React often requires extra modules and components, which keeps the core library small, but means there’s extra work involved when incorporating outside tools. Angular, on the other hand, is more of a full-fledged solution that doesn’t require extras like React often does, though it does have a steeper learning curve for its core compared to React.

Additionally the above differences implies that for the most parts you can replace any Angular developer with any other Angular developer, and after an investigation phase of maybe half a week, your replacement is equally productive as the person who worked on the codebase originally. This results in an “agile organisation”, able to easily move resources around between projects, without needing a longer learning period as resources are moved between projects.

With React the above is simply not true, because each React developer has his own favourite HTTP client, he’s got his own favourite widget library, he’s got his own favourite “whatever” library, resulting in that you’d rarely find two codebases with similarities at all.

So regardless of whether or not React is objectively “better” than Angular, it’s already lost at this point, since resource management at a “React company” becomes much more rigid, and you’re much more dependent upon individual resources, whom are more difficult to move around and replace if needed. You have created an unnecessary “dependency” from a business perspective, where you’re much more dependent upon individual contributors, and you’ve got less flexibility as a company.

Practical adavatage of angular in development over React, most Angular projects ends up looking similar. For a company having dozens of in-house developed back office administration applications, this is an advantage, since back office workers used to one app, can easily understand all apps. With React this is simply not the case.

React is more suitable for intermediate to advanced JavaScript developers who are familiar with concepts from ES6 and up, while on the other side Angular;

favors those same developers who are also familiar with TypeScript, which contributes massively to the steep learning curve.
Dynamic Template Engine; One of Angular’s main features is its’ unique HTML templates with integrated custom elements, resembling XML. The way you interact with these HTML templates is Angular-specific, and unlike interaction experienced in React or other popular frameworks. Angular provides custom attributes and HTML elements that enable dynamic rendering of HTML.
It is RxJS based framework, Throughout the Angular framework, there is a reliance on the RxJS library (JavaScript Reactive Extensions).

You can basically assume RXJS as part of Angular. The reason is that Angular itself is built using RXJS. You cannot escape it, due to this, when you start to learn Angular, you immediately notice that there is an emphasis on reactive programming. It is a framework where Observables and Promises are ubiquitous. You’ll see Observables used in the HTTP client, Router events, and other Angular provided Services. You’ll notice that you can’t get anywhere without having to deal with streams of data, which isn’t a bad thing. However, it does force you to learn RxJS in-depth; specifically the way Angular interacts with data streams. Although RXJS is great and is essential for reactive programming in Angular, it steepens the learning curve dramatically.

So really, which of these two frontend libraries/frameworks are better technically, is at this point completely irrelevant. As long as Angular performs at least somewhat “close” to React, the technology behind, and its ability to perform, is no longer important for you as a company.

# Angular Vs Vue

In most cases, you probably wouldn’t be deciding between only Angular and Vue. They are vastly different libraries with very different feature sets and learning curves. Vue is the clear choice for less experienced developers, and Angular would be preferred for those working on larger apps.

A large library like Angular would require more diligence in keeping up with what’s new, while Vue would be less demanding in this regard and the fact that the two most recent major releases of Vue are in separate repositories helps. It should also be noted that Vue was created by a developer who formerly worked on Angular for Google, so that’s another thing to keep in mind, though that wouldn’t have a huge impact on your decision. The core library of Vue focuses primarily on declarative rendering and component composition and can be embedded into existing pages. When it comes to design reactive systems, Vue can become a lifesaver within a short span of time. It also provides seamless configuration and customization to fit the specific needs of already existing web pages.

Angular JS is very useful in creating dynamic web applications. Developers working with Angular JS use HTML as the template language, and its syntax is used to express the application’s component briefly. Its architecture allows automatic and smooth data synchronization between model, view, and components. For a single-page based web application, Angular JS is quicker and easier to code. Its templates are the same as the traditional plain HTML and include extended HTML terminology, which means that even a beginner can straight away get his hands dirty with Angular JS. The key difference of using Vue and Angular are as follows;

Angular JS doesn’t have to be added installed separately; one must add it like any other JavaScript file so that it be used in applications, whereas Vue JS uses CLI or CDN for installation.
Angular JS is a front-end framework and can be used with any backend programming language like PHP, Java etc., whereas Vue JS is strictly front-end based and uses HTML, CSS and JavaScript separately
Angular JS is an open-source framework for the client-side of the application, whereas Vue JS is an open-source and progressive framework for building user interfaces.
Angular JS implements the MVVM (Model-View-ViewModel) pattern, whereas Vue mainly focuses on ViewModel, meaning it lets us see display the portions of data.
Angular JS is a web application framework, whereas Vue JS is a progressive framework perfect for building single-page applications. -
Angular JS is opinionated, which means there is a certain way application should be structured, whereas Vue JS is modular and flexible.

Therefore if developers are looking for easier product creation, they should choose Vue JS. It would be a more helpful option when your JavaScript fundamentals are not too strong. If your front end is Laravel community, then you should definitely go with Vue JS since the Laravel community considers Vue JS as their most preferred framework. It will reduce the total process time by 50% and also frees up space on the server.

Angular JS is a better option for those developers who need to deal with both client-side and server-side modes. Angular JS would be an ideal choice if one wishes to create heavy web applications with several components and complex requirements. One can also go with Angular JS if there is a requirement to choose the new project’s existing components.

Vue JS is lightweight and acts as a fitter little brother of Angular JS. If you want a less opinionated framework, Vue JS is a better choice than Angular JS, whereas Angular JS is a preferred way of building complex applications, yet good quality. Basically, which one is perfect boils down to the nature of the project and a developer’s learning capability. But Angular JS vs Vue JS, both JavaScript frameworks, can give your application development the best results.

# React Vs Vue

Both these React and Vue can accomplish similar results, are popular in the community, and are used by successful businesses. But they offer differences that impact the learning curve, implementation time, and ideal use cases. So, if you are a developer, you know that it takes a lot of effort to master technology.

One of the biggest differences between Vue and React is the way the view layer is built. By default, Vue uses HTML templates, but there’s an option to write in JSX. In React, on the other hand, there’s solely JSX. Vue’s traditional separation of concerns into HTML, CSS, and JS makes it easier even for beginner frontend developers to learn how to create Web applications. HTML templates are also familiar to most Web designers, and thus improve collaboration between developers and designers. React’s JavaScript Expressions (JSX) combine HTML and CSS together into JavaScript. This XML-like syntax lets developers build self-contained UI components with view-rendering instructions included.

Vue is purpose-built for creating interactive multi-page apps. You can quickly import its library and implement the framework to your existing apps. Also, the Vue CLI comes with a ready-made scaffolding that allows you to start a new project in no time. When you install project dependencies, you implement them as plugins, so even if some standards change, you simply update the dependency.

As for the companion libraries for state management and routing, in Vue they are a part of the core library, so they are officially supported and up-to-date (unlike React, where they are community-based). It can be successfully used to build single-page apps, however, if you opt to use HTML syntax instead of JSX, reusing templates down the road can become cumbersome.

React, because of its impressive community, has a lot to offer. It’s lightweight enough to easily build multi-page apps but also good with single-page ones. React is immensely useful for building scalable web apps (look at Facebook). Unlike Vue, React doesn’t provide ready-made solutions for e.g. routing, so you need to use third-party libraries for that (Flux/Redux, and create-react-app scaffolding tool).

React’s CLI comes out a bit poorer when compared to Vue’s. You cannot customize your project during generation but you can only use a single-page app template. From 2021 it is also possible to generate projects from user-built presets.