Frontend web development frameworks
If you want to scale a feature-rich web application quickly along with a team, writing a scalable application requires structure, organization, and maintainability.
Fortunately, you don't need to decide on structure and tooling yourself. Frontend frameworks make app development easier by providing more structure to the way we write applications. They do come with a learning curve, but in return you get a more maintainable codebase, reusable components, nice conveniences, and helpful tooling. These benefits can really pay off as your project grows along with you and your team.
There are a lot of front-end frameworks to choose from. Some of the most popular are React, Vue, and Angular. There are some nuances, but generally, frontend frameworks encourage component-based/reusable code block architecture via a top-down, one-way data flow which involves passing information from parent components to their children. In turn, frontend frameworks promote declarative code writing (e.g., more HTML and less JavaScript).
TIP
Be sure to read up on Node.js, npm, package.json, dependencies, devDependencies, and semantic versioning before you start working with frameworks, and you should also download Node.js and npm on your machine before creating a framework-based application.
Component-based mapping libraries
There are a growing number of JavaScript mapping libraries as reusable React, Angular, web, or Vue components. These component libraries are appealing because they allow developers to quickly integrate mapping functionalities as reusable code blocking into their applications without reinventing the wheel. Some notable component libraries are:
- Open-source:
- Commericial libraries:
Although the main focus of this chapter is frontend frameworks, it's worth mentioning that some mapping libraries are framework-agnostic and provide web components that can be used in any frontend framework or even plain JavaScript applications, meaning that you can use them regardless of your framework of choice.
The challenge with mapping libraries lacking framework-agnostic web components is that committing to one framework can make switching difficult, or the library might not even offer support for your desired framework. This scenario often requires you to build all the necessary UI components yourself.
What are web components?
Details
Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components built on Web Component standards will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML. Web components are based on existing web standards, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior.
Interested in writing your own web components using a web mapping library? Check out these resources about the process:
Web components in plain JavaScript and React
Before the ArcGIS Maps SDK for JavaScript introduced their new library of web components in version 4.28, widgets based on proprietary technology were the only means for adding UI to your web application. Implementing widgets in an app required a lot of boilerplate code and was imperative in nature.
The ArcGIS Maps SDK for JavaScript's switch from an imperative API for UI to a community standards-based component library makes it easier to use in plain JavaScript and frontend frameworks. Check out the code below accomplishing the same task using the SDK with imperative widgets versus declarative web components in plain JavaScript.
<body>
<div id="viewDiv"></div>
<script>
require([
"esri/views/MapView",
"esri/widgets/Legend",
"esri/widgets/Search",
"esri/WebMap",
], (MapView, Legend, Search, WebMap) => {
const webmap = new WebMap({
portalItem: {
id: "11e173a4e2f040ae80d39e44ee29467a",
},
});
const view = new MapView({
container: "viewDiv",
map: webmap,
});
const search = new Search({
view,
});
const legend = new Legend({
view,
});
view.ui.add(search, "top-right");
view.ui.add(legend, "bottom-left");
});
</script>
</body><body>
<arcgis-map item-id="11e173a4e2f040ae80d39e44ee29467a">
<arcgis-search slot="top-right" />
<arcgis-legend slot="bottom-left" />
</arcgis-map>
</body>The neat part here is that the same web components can be easily used in React:
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
// Individual imports for each component used
// Necessary in applications using bundlers like Vite or Webpack
import "@arcgis/map-components/components/arcgis-map";
import "@arcgis/map-components/components/arcgis-legend";
import "@arcgis/map-components/components/arcgis-search";
// A reusable React component wrapping ArcGIS web components
function App() {
return (
<arcgis-map item-id="02b37471d5d84cacbebcccd785460e94">
<arcgis-search slot="top-right" />
<arcgis-legend slot="bottom-left" />
</arcgis-map>
);
}
// Mount the App component to the DOM
const root = createRoot(document.getElementById("root"));
root.render(
<StrictMode>
<App />
</StrictMode>,
);Tooling
HTML/CSS/JavaScript are core features of modern web browsers. Frameworks like React or Vue extend these native web technologies.
Bundlers like Vite optimize and prepare framework-based applications for browsers by reducing file sizes and splitting bundles.
Furthermore, adding TypeScript to frontend frameworks like React provides an improved developer experience. TypeScript's static typing adds a layer of safety to JavaScript development, reducing uncertainty and boosting confidence.
Code sample
Check out this code repository combining the ArcGIS Maps SDK for JavaScript with React, Vite, and TypeScript.
Next steps
We've seen how frontend frameworks can help scale web mapping applications quickly and efficiently by promoting reusable components, maintainable codebases, and helpful tooling.
The natural next step is learning implications of where your data is hosted and application rendering strategies for robust real-world success. Strategies to improve search engine optimization, performance, and additional scalability will be covered in the next chapter.