Building web apps with Wijmo, NPM, Webpack, and JavaScript frameworks
Notice: Code examples in this blog use Wijmo modules from the non-scoped ‘wijmo’ npm package. Beginning with Wijmo 2019 v1 release, Wijmo packages are also available in the @grapecity npm scope, and the use of these packages is the recommended for new applications. For the convenience of our customers, we continue publishing new Wijmo builds as non-scoped ‘wijmo’ packages as well.
Read more about Wijmo NPM Package Changes.
As of the 2018 v1 release, Wijmo is available on NPM. This blog is the first in a series on how to use Wijmo and NPM to build apps for Angular, Ionic, React, and Vue.js.
Blog series
1. Introduction to NPM and Wijmo
Why developers use NPM, Webpack, and frameworks
Until recently, most JavaScript developers would add components to their applications using script tags to load some JavaScript files, and then referencing those components in other script blocks:
<!-- load dependencies -->
<link href="http://cdn.wijmo.com/5.latest/styles/wijmo.css"
rel="stylesheet"/>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.js"></script>
<!-- use them in your code -->
<script>
var theGrid = new wijmo.grid.FlexGrid('#myGrid', {
itemsSource: getMyData();
});
</script>
This approach is simple and works well for small, simple applications. But as applications and frameworks grow in complexity, keeping track of dependencies and versions becomes more difficult and error-prone.
Even after you've figured out all the files you have to load, and in what order, loading lots of small files over the web is not efficient, so application load times can become a problem.
To address these problems, new tools have emerged to make things easier and more efficient for developers. Two of the most popular such tools today are:
-
NPM: The Node Package Manager is the world’s largest software registry, containing over 600,000 packages (building blocks of code) that you can easily add to your application. NPM makes it easy to track dependencies and versions for these packages.
-
Webpack: Webpack is a module bundler for JavaScript applications. It webpack processes applications, builds dependency graphs that include every module the application needs, then packages those modules into one or more bundles for efficient deployment.
In this series, we'll show how you can use Wijmo with NPM and Webpack to create applications targeting the most popular JavaScript application frameworks:
-
Angular: As Google’s framework for building JavaScript applications that live on the web, mobile, or the desktop, this full-featured framework combines declarative templates, dependency injection, and includes end-to-end tooling. Read more about Wijmo's Angular support.
-
Ionic: One of the most popular frameworks for building mobile apps, Ionic is focused on the look and feel, or the UI interaction, of an app. It's based on Angular and uses Cordova to provide access to native capabilities of specific devices, including sensors, data, network status, etc.
-
React: Facebook’s framework calls itself “A JavaScript library for building user interfaces.” It extends JavaScript with an HTML-like syntax for creating components that are combined into applications. Read more about Wijmo's React support.
-
Vue.js: An ecosystem that scales between a library and a full-featured framework, Vue is the smallest and least opinionated framework on this list. It lets you write traditional HTML and JavaScript, or “vue” files, that combine HTML, JS, and CSS to create encapsulated reusable components.
We won't get into the details of NPM, Webpack, or any of the frameworks listed above. All these tools are incredibly popular and thoroughly documented, and you can read our e-book on frameworks for a good overview.
Instead, we'll focus on the task of adding Wijmo to simple applications written in each framework. The next four blogs in the series describe how to create a simple application using Wijmo's controls, such as the JavaScript DataGrid with each framework. You may want to peruse them all to see the differences and the points they have in common. If you're interested only in a specific framework, we'll be publishing a short series covering each framework in the next few weeks.
The basic steps for creating and maintaining applications are the same in all frameworks:
-
Install the appropriate CLI (Command-Line Interface utility) to generate, run, maintain, and deploy applications.
-
Use the CLI to create the application.
-
Use NPM to add Wijmo to the application.
-
Import the components you want to use and add the appropriate markup.
