To create links, I had to use the Firebase console. This wasn’t a problem but it was cumbersome for the high frequency of editing links. The user experience (UX) was not ideal. Now I was faced with a problem. How do I create, edit, and delete links? I needed to build a frontend for the URL shortener. I needed a website for this.<\/p>\n\n\n\n
In this article, we’ll review the available tools used for building this frontend, decision choices, and factors that influenced why they were made.<\/p>\n\n\n\n\n\n\n
Problem statement<\/h2>\n\n\n
The project requirements were:<\/p>\n\n\n\n
- Platform\/Architecture<\/strong>. The engineering and structure of the coding process.<\/li>
- UI Toolkit<\/strong>. Components to use for the various parts of the UI.<\/li>
- Convenience<\/strong>. Building the backend was not tough, so this frontend should not be either. I wanted clean code and fast development.<\/li><\/ul>\n\n\n
The First Decision Choice: Angular<\/h2>\n\n\n
Many ideas come to mind when starting out to build a frontend. In a broad sense, we could categorize frontend building options into 3 platforms:<\/p>\n\n\n\n
- Website Builders – like WordPress, Wix, Squarespace, etc.<\/li>
- Vanilla Building – using plain HTML, CSS, and JavaScript.<\/li>
- JavaScript Framework – like React, Vue, Angular, etc.<\/li><\/ol>\n\n\n\n
In my experience, website builders provide a very restricted collection of widgets, components, and templates. Most website builders don’t provide an easy way to integrate an entire custom backend like Firebase. While it is possible to build impressive sites by connecting these pieces together, the degree of complexity of my project was likely beyond what these services typically provide.<\/p>\n\n\n\n
Using the no-framework style or vanilla would have been a possibility. However, the deciding factor that made me not choose the pure vanilla route was that the latest non-CDN version of the Firebase JavaScript SDK (Version 9)<\/a> is designed with installation via
npm<\/code> oryarn<\/code> and module bundling in mind.<\/p>\n\n\n\nJavaScript frameworks handle frontend core parts (like routing, backend-linking, etc.) to reduce developer efforts. There are many of them and choosing which to use seemed to be a harder choice to make.<\/p>\n\n\n\n
There are many JavaScript frameworks for frontend development. Examples include Angular, React, Vue, etc.<\/p>\n\n\n\n
Of the available frameworks, I have the most familiarity with Angular. This is because I have used it on previous projects like:<\/p>\n\n\n\n
- Choir Carol Quiz<\/a>: Portal where Quiz participants competed in two online rounds of timed multiple choice questions on select Bible chapters.<\/li>
- Genesys AE-FUNAI Community<\/a>: Custom Form where members of Genesys Campus Club AE-FUNAI (my community) report their progress and share their achievements.<\/li>
- Tutorial Management System<\/a>: Simple session management dashboard between students and tutors.<\/li><\/ul>\n\n\n\n
This familiarity allows me to build quickly with Angular. Being able to build quickly should not be underestimated.<\/p>\n\n\n\n
I chose Angular because of its Object-Oriented Programming (OOP) ability. OOP is a programming paradigm that focuses more on classes, data, or state being managed, rather than on the logic controlling the data, as is the case with functional programming. Separation of concerns is one advantage of using OOP. In other words, OOP permits encapsulation. It permits you to scope aspects of the program to peculiar domains or classes.<\/p>\n\n\n\n
In Angular, components (and their lifecycle methods) are scoped to TypeScript classes. This makes you think the OOP way. The OOP advantage reflects in how Angular components serve as reusable UI units in the Angular framework. That way you see an Angular component as some self-sufficient entity that is yet part of a whole. This makes frontend development easy as various parts of the frontend app can be scoped to components and hence can be used where needed.<\/p>\n\n\n\n
I also chose Angular because it uses TypeScript. TypeScript is JavaScript with features of a typed programming language. Typing in this context means a variable can’t change the kind of value it holds all through its life. For example, a variable holding a string will not all of a sudden hold a number while it is used in that program. Typing increases code quality and reduces bugs.<\/p>\n\n\n\n
As a result of its type system, TypeScript reduces the time spent debugging Angular apps. It gives developer experience as the developer will have more time to build the frontend app. Debugging also becomes easy for the developer.<\/p>\n\n\n\n
Note:\u00a0Here is more on Object-Oriented Programming with TypeScript<\/a><\/p>\n\n\n\n
Still, on Angular’s advantages, Angular apps come as a complete setup. They handle important features like bundling CSS preprocessors or Angular services by themselves. That said, when using Angular, you don’t need to configure each library independently, Angular takes care of this.<\/p>\n\n\n\n
An Angular service is what Angular uses to configure dependency injection. In simple terms, dependency injection is providing an application with what it needs to function (dependencies) without the application having to take care of how the dependencies were gotten. I also chose Angular because of its out-of-the-box handling of services. So Firebase, for example, will be auto-provided to all Angular components that need without any extra configuration.<\/p>\n\n\n\n
The benefits of Object-Oriented Programming, TypeScript, and dependency injection make Angular a go-to for frontend development. Coupled with the fact I was already familiar with Angular, Angular was more convenient for this URL shortener project.<\/p>\n\n\n\n
Angular articles on CSS-Tricks<\/a> are also part of the story. They gave me more confidence with using Angular.<\/p>\n\n\n
The Second Decision Choice: Material Design<\/h2>\n\n\n
After choosing Angular, my next task was to consider how I would handle the user interface (UI).<\/p>\n\n\n\n
I could ignore and do vanilla CSS instead but why reinvent the wheel? After all, this would defeat the reason for using a JavaScript framework – convenience.<\/p>\n\n\n\n
With choosing a UI toolkit, there seems to be an ocean of options. To name a few, one can use Bootstrap, Bulma, Semantic UI, Tailwind, etc. Each toolkit has its own specifications and motivations.<\/p>\n\n\n\n
For the use case of my project, Material Design led the pack.<\/p>\n\n\n\n
One of the most important factors was the support for Angular and Material Design. There is an entire Angular-only specification for Material on
material.angular.io<\/code> (that is as a subdomain to the Angular docs itself).<\/p>\n\n\n\nI settled for Material Design because it focuses on components. Unlike other CSS frameworks, it doesn’t have CSS utility classes. This was okay because I only wanted some component kit (buttons, icons, inputs, sidebars, snack bars, etc.) Material also adds animations, ripple, and shadow effects by itself; making it more convenient than other libraries.<\/p>\n\n\n\n
Furthermore, Angular Material has out-of-the-box theming support, when initializing Angular Material, you have the option of choosing a pre-defined theme for the entire Angular app or creating a custom one.<\/p>\n\n\n\n
![\"Screenshot](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/angular-url-shortener-theme.png?resize=1024%2C464&ssl=1\")
<\/figure>\n\n\n\nFor the sake of convenience, I chose a dark theme while setting up Angular Material.<\/p>\n\n\n
The Third Decision Choice: Reactive Forms<\/h2>\n\n\n
With a framework and toolkit decided, I turned my attention to one of the most important features of the URL shortener. The core of the URL shortener’s frontend is the form for creating and updating links.<\/p>\n\n\n\n
Let’s call this form the links editor. The links editor form has only two inputs, one for the short version of a link and the other for the full URL the short version will redirect to.<\/p>\n\n\n\n
For managing forms, Angular comes with two mechanisms. So instead of creating a form and handling its validation and submission as is done in vanilla HTML and JavaScript, you have to use either of the two ways Angular provides. The two methods are:<\/p>\n\n\n\n
- Template-driven forms<\/li>
- Reactive forms<\/li><\/ol>\n\n\n\n
Template-driven forms<\/a> as the name imply, involve the HTML (template) code controlling the greater part of the Angular form. This approach is preferable when your form does not do much or is for one-time usage.<\/p>\n\n\n\n
Reactive forms<\/a>, on the other hand, provide a model-driven approach to handling form inputs whose values change over time. I needed reactive forms because it is the same form that I will use to edit different links at any point in time.<\/p>\n\n\n\n
Note:\u00a0Here is more material on using Reactive Forms.<\/a><\/p>\n\n\n\n
At this point, the benefits of previous choices began playing out. Angular Material has
form-field<\/code> components. Theform-field<\/code> wraps the input as a component and provides animations, ripple effects, and error messages if necessary.<\/p>\n\n\n\n![\"Animated](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/angular-url-shortener-link-form.gif?resize=1024%2C576&ssl=1\")
<\/figure>\n\n\n\nSo I used it for the two inputs of the editor form.<\/p>\n\n\n
The Fourth Decision Choice: Angular Material Bottom Sheet and Drawer<\/h2>\n\n\n
The final decision involved how to improve the user experience. The URL shortener would need other features like viewing all created links and their analytics. These features would require space on the screen that required me to rethink if there were better solutions to display the links editor form to the user.<\/p>\n\n\n\n
If the user has no current need for the links editor form, it makes sense for the links editor form to not always be in view. This would free up space on the UI for other elements.<\/p>\n\n\n\n
However, splitting this user experience into two separate pages felt disruptive. Instead, to open the links editor when needed, I added a floating action button on the page for creating links. When clicked, the button will cause the editor form to be opened in any fitting UI component.<\/p>\n\n\n\n
A bottom sheet<\/a>, as the name implies, is a UI component that opens from the bottom of the screen. It has interactive content the user can work it. It overlays the current view of a mobile screen (but doesn’t fully block it).<\/p>\n\n\n\n
![\"Animated](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/angular-url-shortener-link-bottom-sheet.gif?resize=470%2C834&ssl=1\")
<\/figure>\n\n\n\nBottom sheets are usually used in place of pop-ups if the user will spend a long time interacting with their content. So, bottom sheets are a good fit to open the editor on mobile screens. However, interacting with a bottom sheet is hard when the screen is wide. I needed a different UI component for the links editor form on wide screens.<\/p>\n\n\n\n
- Genesys AE-FUNAI Community<\/a>: Custom Form where members of Genesys Campus Club AE-FUNAI (my community) report their progress and share their achievements.<\/li>
- Choir Carol Quiz<\/a>: Portal where Quiz participants competed in two online rounds of timed multiple choice questions on select Bible chapters.<\/li>
- UI Toolkit<\/strong>. Components to use for the various parts of the UI.<\/li>
![\"Animated](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/angular-url-shortener-link-drawer.gif?resize=1024%2C576&ssl=1\")
<\/figure>\n\n\n\n