Building Your Own JavaScript Framework by Vlad Filippov

Author:Vlad Filippov
Language: eng
Format: epub
Publisher: Packt Publishing Pvt Ltd
Published: 2023-10-16T00:00:00+00:00

Utilizing libraries

It makes sense to commit to specific JavaScript libraries before developing a new framework. The use of existing JavaScript libraries will save you time—time you can use to focus on the framework’s features and technical architecture. It is a common pattern for frameworks to rely on libraries to build out the internals. These libraries often indirectly enable the framework feature set behind the scenes, including features such as data management, routing, interacting with the DOM, and abstracting away JavaScript runtime complexity. As the framework covers a more extensive feature set and shapes the development experience, the internal libraries focus on delivering a precise solution to a particular problem.

Choosing the right set of libraries can significantly impact the development process and the shape of your framework. The libraries you utilize in your framework will likely make you an expert user of them. However, balancing the benefits of using libraries with potential downsides, such as compatibility problems, API restrictions, and ongoing maintenance, is necessary.

As we explore other JavaScript frameworks, we can identify libraries they rely on for specific functionality. Depending on the architecture, your framework can build the library right into the framework or use it to extend aspects of your framework. If we look at Angular, we will find that it utilizes RxJS (rxjs.dev) for reactive programming, including features such as data observables, iteration, value mapping, and more. The RxJS library can be used directly from within Angular components, such as the following BookService service:

import { HttpClient } from '@angular/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { map, retry } from 'rxjs/operators'; @Injectable() export class BookService { private baseUrl = '...'; constructor(private http: HttpClient) {} getWeather(latitude: number, longitude: number): Observable<any> { const url = `${this.baseUrl}?latitude=${latitude} &longitude=${longitude}&current_weather=true`; return this.httpClient.get(url).pipe(retry(3)); }}

The preceding code uses the Observable class to return the getWeather function first. From within your Angular classes, you can rely upon RxJS to provide many data-operating operators. In addition, the RxJS library provides error-handling operators, as seen in the retry call in the preceding code. A detailed explanation of the library’s operators can be found at rxjs.dev/guide/operators.

Exploring the RxJS example

The chapter5 directory in the book repository includes an example of using Angular with the RxJS library. You can try this out on your own computer by running the interactive script from the chapter directory or executing npm install, and then npm run dev from the angular-rxjs directory.

The example application will utilize the BookService service presented previously to fetch data. The API data comes with additional properties that you can use to extend the existing application. Refer to the README.md files for additional information.

In another example of library usage, Vue.js initially used Vuex as a library for centralized state management. However, as the framework developed, the approach to managing the state changed. Vue has switched over to recommending and utilizing Pinia (pinia.vuejs.org) for state management. With an intuitive approach based on the Flux architecture, the library closely related to Vue, it allows developers to use

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.