TypeScript has become a mainstay of modern web development libraries. Consuming functions and widgets written by a third party can be error-prone without some type of guidance.
The TypeScript 2.4 release might be a minor update in terms of not requiring substantial changes within our open source work and customer projects, but it provides some major benefits that we are already leveraging throughout the Dojo 2 codebase. The headline feature for TypeScript 2.4 is support for the ES.Next dynamic import() expressions that emit down to a require and will enable us to replace the existing @dojo/core/load module that is currently used to lazily load modules and mark modules for code splitting, and remove a significant amount of code and complexity from our @dojo/cli-build-webpack cli command package.
TypeScript 2.3 is the latest version in the quarterly release cycle from the TypeScript team. This release contains several useful additions to TypeScript which we have already started to leverage within some of our current projects.
dojox/gfx is Dojo 1.x’s vector graphics library, with support for SVG, Canvas, and other legacy rendering environments through a drawing API based on the semantics of SVG. This API also provides the foundation for dojox/charting.
As many of you know, Dojo 2 is being built on TypeScript. Many of us involved in Dojo 2 believe that TypeScript brings several advantages to developing with web technologies these days.
The TypeScript team recently announced the TypeScript 2.2 release candidate which will contain key improvements to the TypeScript language. Most notably, are the introduction of the object type and improved support for mixins and composable classes.
Web applications can be deployed to many environments, including desktops, tablets, and mobile devices. We can even deploy web applications natively using a wrapper such as Apache Cordova to gain access to device features such as GPS, battery, and accelerometer data.
As the new year starts to unfold, it’s time to take a quick look at the things our team at SitePen resolves to do this year. Too often, we see large enterprise customers who have multiple teams creating the same features, without having a simple way to share and maintain code over time.
The TypeScript team has just announced the release of TypeScript 2.1 which contains several long-awaited features (pun intended) for Dojo 2. Rather than repeating the excellent summary from the TypeScript team, we’ll look at how a few of these features will improve Dojo 2! Dojo 2 supports exporting to ES5 environments.
The official name of the rebranded and relaunched merging of the jQuery Foundation and the Dojo Foundation is the JS Foundation. SitePen is excited to be a member of this new organization! Back in 2004, Alex Russell, David Schontzler, and I wrote the first lines of code for the Dojo Toolkit. Our early goal was to create the “next-generation DHTML toolkit” that would encourage usage and adoption by ensuring users and contributors they would receive a safe to use open source software.
SafetyNet is an annual conference hosted by Pulsiam and is focused on trends in software for the safety industry. Because of our expertise in shaping the modern web and our ongoing work with Pulsiam’s application development efforts, I was invited to deliver a keynote about the past, present, and future of the web, as this industry begins to transition to web-based solutions.
Over the past few years, TypeScript has iterated and greatly improved developer ergonomics. With our efforts on Dojo 2, we’ve been very excited about many of the features and improvements made, including several key improvements that have landed for TypeScript 2, which is currently in beta release! TypeScript 2 adds a major improvement in the type analysis of code.
Recently on GitHub, someone accused Dojo 2 of being vapourware. This opinion came from a position of misinformation.
We were recently asked about options for mixing Dojo widgets and Angular 2 components into the same application: Is it possible to render an Angular 2 component and Dojo widgets on the same page? Are there any special configuration settings needed? What’s the best way for Angular 2 and Dojo to communicate and/or send messages? What kind of complex challenges and communication issues should we be aware of? For an application that assembles many different components, if some of these are are Dojo widgets and some are Angular 2 components, how can we get them to play nicely together? It certainly is possible to render Angular 2 components and Dojo widgets on the same page. However, this could lead to more complex challenges regarding the architecture and data communication that would require deeper investigation to determine, based on the specific approach to building apps with Angular 2 and Dojo.
In this installment of our series on building web applications, we look at the SitePen approach to solving challenges in web application development. We employ all of the solutions described in part 2 of the blog series.
While there are many challenges today with building web applications, there are also many options to address the issues we face with technology, process, and people, allowing us to reap the benefits of the web as an application platform. While many of the challenges with today’s web applications come from the vast array of technologies that are available, there are clear strategies that can be employed to turn those same issues into advantages that can make building applications easier.
Web applications provide many benefits. Most organizations seek to improve the efficiency and effectiveness of business processes through the use of software.
One of the additions of the recent Dojo 1.11 release is a modern flat theme created with the Stylus preprocessor. The flat theme allows you to apply a modern, flat look and feel to existing Dojo applications.
Intern, via the Leadfoot WebDriver library, provides a lot of low-level control over the browsers it uses to run tests. Tests can navigate to new pages, resize the browser window, examine elements on a page, and interact with controls like inputs and buttons.
One of the nice features of testing with Intern and Leadfoot is the ease of authoring functional tests to mimic end-user behavior. The API for retrieving relevant DOM nodes is relatively straightforward, usually with a single line of code needed to get a reference to the relevant node.
It’s been over a year since the release of dgrid 0.4, which brought about some major changes, including integration with the new dstore API. Since then, we (and others) have used it in numerous applications, and we’ve continued to refine it.
In mid-October, I attended my first jQuery Foundation boarding meeting. In case you missed the news, we announced in early September that the Dojo Foundation and jQuery Foundation are merging.
SitePen is a huge supporter of TypeScript. It allows our developers to write using modern standards support for ES6 and some ES7 features while still targeting ES5 browsers.
Nearly every sufficiently large web application looks for a mechanism to efficiently synchronize or bind data between the Model and the View. There are many large scale application frameworks and approaches focused on this, whether the binding is one-directional like React, or follows other approaches such as those seen with AmpersandJS, Angular, Aurelia, Backbone, Ember, Knockout, Mayhem, or many others listed on ToDoMVC.
Dojo’s Deferred module provides a convenient way of managing asynchronous operations. If you’re new to deferreds, you can get a good introduction by reading our blog post and some tutorials on dojotoolkit.org: Getting started with Deferreds and Dojo Deferreds and Promises.
We have released dstore version 1.1, which features a new set of stores for local DB storage. This feature provides the ability to store data locally in browsers, and use high-performance querying capabilities through the disparate technologies of IndexedDB and WebSQL (and localStorage), through the consistent dstore interface.
At the end of 2014, we looked ahead to determine where to focus SitePen’s open source efforts in the coming year. After our successful contributions to dgrid and the new dstore package, it became increasingly clear that contributing to the future of Dojo was where our team would have the biggest impact and the most fun.
Dijit and dgrid provide a powerful set of user interface components, allowing for fast construction of sophisticated web applications with excellent performance and interactivity. However, one particular configuration of dgrid that can impact memory and performance: heavy use of persistent Dijit editors within grid cells.
While a more recent advancement allows us use the HTML5 file API to retrieve contents from files, this approach is not universally supported in web browsers as yet. Instead, we will access data from user-uploaded CSV files using the following steps: Upload a file to the server Retrieve the file from the server Load the data into an easy-to-use format Traditional file uploads from within a form are only permitted when the entire form is submitted to the server and a new page is returned.
Performance is a critical part of most applications. Research continually shows that good performance is essential for a good user experience.
It’s been a while since we’ve dove into Dojo’s Deferred module on the SitePen blog—the last time was back in 2010 when we introduced the promise-inspired improvements that landed with Dojo 1.5. Quite a lot has happened since on the topic, including a ground-up rewrite of Dojo’s asynchronous foundations in 1.8+, so it’s about time we take another look at deferreds and promises and how it all fits together in Dojo.
When building web applications, developers often face the dilemma of whether to use traditional server-side rendered pages, or client-centric applications that rely on Ajax/JSON data requests, with client-side rendering of data. These two approaches also tend to dictate navigation (among other things), leading to traditional page navigation or a single-page application (perhaps with hash-based navigation).
While it will not happen often, there may be times when you need to patch your Dojo source. Perhaps you discovered a bug and are waiting for the fix to be committed or released, or your application uses an older version of Dojo but you want to use features found in newer releases.
We normally try to schedule new minor releases of Intern about once every four to six weeks, but when we are working on a major release, there will often be a larger than usual gap in the release cycle. In order to keep our users informed of what’s going on, we wanted to write about what we’ll be doing over the next six to twelve weeks for Intern 3, during which time there will be no new releases (except for possible critical patch releases).
A common scenario with web applications is accessing protected resources, which require authentication with the server in order to proceed. A common flow is as follows: User opens web site Web site presents authentication screen User enters credentials Web site presents protected information This is simple enough to begin with, but what happens when the session times out? Or perhaps the application does not require authentication initially, but once the user initiates an action to access protected resources authentication is required? A common approach is to use redirects to an authentication page: User’s authentication session times out Any action on user’s part redirects to authentication screen After successful authentication, user is redirected to the results of the initial action This model works well enough with applications architected around the full page request-response model, but becomes less pleasant with single-page applications that provide a persistent and responsive user interface.
As object stores are frequently used in Dojo-based applications, developers often ask about a good way to utilize stores in their custom widgets. Here we present a common pattern for doing just that in a two-stage approach, starting simple.
Bootstrap is a framework created by Twitter’s developers to consolidate their HTML/CSS design and widgets. Bootstrap provides a clean responsive design, but the set of widgets it includes is limited, especially when compared to what’s available in the Dijit library.
When writing tests for an application, it’s prudent to add mock or stub data in order to allow code to be properly tested in isolation from other parts of the system. Within a normal Dojo application, there are typically three places where mocking will occur: I/O requests, stores, and module dependencies.
Dojo’s store API is a common interface for providing data to user interface widgets, such as dgrid, Dijit Select, and Dojo Charting. The beauty of having a consistent API is that once you’ve defined an interface for a data source, that data becomes easily available to all widgets that support the store API.
At SitePen, we have long been advocates for building web applications on a RESTful architecture. Over the last several years, it has been exciting to see organizations increasingly provide RESTful endpoints for the Dojo-based front-ends that we support and develop.
Modern browsers have powerful new database capabilities that enable applications to store data locally, and perform advanced indexed queries without a network connection. Applications can be built with offline support without any disruption to data interaction, including searching.
Intern is a great test stack for writing full-featured unit and functional tests, with remote WebDriver-based testing (e.g. BrowserStack) and continuous integration (e.g.
dgrid is SitePen’s lightweight, modular, and easily extensible modern grid component, designed for use with AMD and Dojo. The Selection and CellSelection mixins enable selection of rows or cells, both from mouse or keyboard actions and programmatically.
Last month, we conducted a live webcast to provide an Introduction to Intern, SitePen’s open source testing framework. Our webcast covered: An overview of Intern’s numerous functional and unit testing features and capabilities Mocking objects and data Injecting dependencies Troubleshooting Future direction of Intern While it’s too late to attend this webcast and heckle us with live questions, we recorded the session and have made it available for you online: We encourage you to use Intern in your current application and then tell us about your experience.
When working in an event-driven environment such as the web, it is important to utilize tools that allow you to create succinct, easy-to-read code that’s extensible and flexible. One great mechanism that Dojo provides is the ability to use extension events.
dojo/on and dojo/aspect are two APIs that appear to do similar jobs but actually serve two different purposes. dojo/on is used to setup event listeners for DOM nodes and event-emitting objects.
The widgets provided in Dojo’s Dijit library include not only advanced widgets not provided by HTML, but also enhanced versions of the basic HTML form elements, like <input>. Dijit’s dijit/form/RadioButton provides the same basic functionality as an HTML radio button, so let’s look at how you set one to be checked by default.
Many Dojo widgets make use of client-side templating for generating the UI. Template HTML files are brought in to the page with dojo/text, parsed and converted to DOM nodes, and placed on the page, allowing our code to make substitutions, instantiate widgets within the template, and hook up events and attach points.
In web browsers that support Cross-Origin Resource Sharing (CORS) via XMLHttpRequest objects, Dojo’s XHR mechanism can make cross-domain requests out of the box. Because of the same-origin policy of XMLHttpRequest, Dojo has long supported various methods of loading resources across domains – dojo/io/script and dojo/io/frame; dojo/request/script and dojo/request/iframe in recent versions (1.8+).
What a great year 2013 has been! We’re feeling (collectively) like Ebenezer Scrooge in the final chapters of Charles Dickens’ A Christmas Carol – except we haven’t been jerks up ’til now and we think working at SitePen is a year-round Christmas vacation, unlike the earlier chapters wherein Scrooge forces poor Mr. Cratchit to work by the heat of a candle.
In this post, we want to walk through how you would get started building an application using xstyle, an extensible CSS framework. xstyle provides extensions that allows us to declaratively describe an user interface, making use of data bindings, element generation, and components, giving us an elegant means to create an application.
In addition to a simple, consistent, cross-browser interface to DOM events, dojo/on provides for very convenient clean-up – the function returns a handle with a remove method that will un-register the event listener. Clean-up concerns are not limited to DOM events, so Dojo provides the same interface for dojo/aspect and dojo/topic.
Dojo provides many settings to configure the optimal loading and building of your application source code. We are often asked about the differences between packages, paths, and aliases.
As part of our great updates to the Dojo Tutorials for Dojo 1.8, we’ve been busy creating several new tutorials. Dojo 1.7+ now uses the popular has() pattern for feature detection in combination with a has()-aware build system.
The Dijit library provides an extremely powerful, flexible set of Dojo-based widgets with which you may easily enhance the look and functionality of your web application. These widgets include drop down / popup menus, dialogs, page layouts, trees, progress bars, and form elements.
As part of our great updates to the Dojo Tutorials for Dojo 1.8, we’ve been busy creating several new tutorials. This tutorial teaches you how to easily handle keyboard events with Dojo’s event normalization and dojo/keys implementation.
Dojo Charting comes with dozens of stylish themes you can effortlessly plug into any chart. But what if you want your charts to match your website’s design or business’ branding? No worries: Dojo’s charting library allows you to create custom themes! All of Dojo’s charting themes live within the dojox/charting/themes namespace.
Dojo has an API for Comet-style real-time communication based on the WebSocket API. WebSocket provides a bi-directional connection to servers that is ideal for pushing messages from a server to a client in real-time.
Juan Carlos Galindo Navarro of Venezuela-based RIATeam shares his early dgrid experience with SitePen. Here’s what he had to say.
Linus Ekström of Stockholm-based EPiServer shares his early dgrid experience with SitePen. Here’s what he had to say.
Dojo 1.7 added full support for asynchronous module loading, defined with the widely adopted asynchronous module definition (AMD) format. The new module loader and module format offer faster module loading, better performance, and wide interoperability.
As a SitePen customer, Øyvind Aaraas of KLP decided to try out dgrid on one of his company’s web applications. When asked about his early experience with dgrid, here’s what he had to say! SitePen: How did you learn about dgrid? KLP: We follow the SitePen blog and learned of it there. SitePen: Why did you choose dgrid? KLP: Because dgrid was easy to work with, easy to style and extend and has very quick rendering in all browsers.
You may have seen our recent blog entitled “AMD: The Definitive Source” which exhaustively explained Asynchronous Module Definition. AMD is a topic with significant technical nuances but the purpose of THIS article is to explain the value of AMD for your business.
After many months of work, Dojo 1.8 Beta is almost here. We expect beta to be ready for use on June 22, 2012, with the final 1.8 release due 4-6 weeks later! We’re very excited about this release for many reasons.
The mobile device revolution has placed new demands on web applications. Mobile devices generally have lower bandwidth and lower CPU capacity, forcing us to avoid large complex code.
You’ve likely read that the new dgrid can be as small as 32KB gzipped when including just its minimal dependencies. However, if you use the standard settings for the Dojo Web Builder or a standard Dojo build profile, you end up with a build that’s closer to 100KB gzipped.
Over the last few weeks, Dylan has given talks across the western United States and Europe and we’ve tracked his every move on our blog. Dylan will finish his trip with stops in Tempe, AZ and Las Vegas, Nevada.
The 2012 ESRI Developer Summit is attended by 1,700 developers, half are attending for the first time and thirty percent are from international locations! Dylan continues to mingle with like-minded Dojo enthusiasts from around the world, including people from the US, Canada, UAE, Japan, England, Germany, France, Switzerland, Sweden, Australia, New Zealand, and the Netherlands! The conversations at ESRI Dev Summit are confirming what we already know – Dojo is worldwide! Yesterday, Dylan presented Top Ways Dojo Can Improve Your Mapping App to a standing room only crowd! Using an iPad, iPhone and MacBook Pro to present the talk and demo, Dylan was able to accurately showcase the cross-platform open web capabilities of Dojo. We’ve posted the presentation and encourage you to take a look. SitePen will answer any questions you have about Dojo and mapping. Contact us to learn more.
Most 2012 trend lists include 12 trends. (Get it? 12 in ’12. Of course you do.).
One of the most important parts of creating an effective and intuitive user interface on touch-enabled smartphones has nothing to do with visual appearance—instead, it has to do with creating an interface that properly responds to user input based on touch. For Web applications, this means replacing mouse events with touch events.
dojo/dnd is one of Dojo’s core APIs and is designed to manage the process of dragging and dropping items between two or more containers. It offers advanced features like multiple selections, item acceptance filtering on drop targets, and other behavioral tweaks.
SitePen’s Dylan Schiemann delivered the last of his three Rich Web Experience 2011 presentations yesterday, Never Bet Against the Open Web. Dylan had this to say about his time at #RWX2011: The level of interest in AMD, object stores, and mobile is impressive.
SitePen’s CEO, and co-founder of the Dojo Toolkit, Dylan Schiemann will be kicking off Rich Web Experience 2011 with an engaging Real Time, Real Fast keynote address. His talk will cover WebSocket, one of the hottest new APIs in HTML5, which enables true duplex communication without the overhead, complexity, and extraneous latency of HTTP-based solutions. His keynote will also cover the use of streaming abstractions to minimize buffering, and will consider the performance implications of topic-based publish-subscribe distribution versus filtering techniques. On Wednesday, November 30, Dylan will present Dojo 2.0: Modular, Mobile, and Reinventing Web App Development. This presentation will cover the reinvention of the Dojo Toolkit, one of the original Ajax toolkits. Through a series of improvements in modularity, performance, API improvements, adjustments for HTML5 and mobile platforms, the Dojo Toolkit will continue to provide a stellar platform for building web apps. Dylan will show off the wide variety of features and approaches currently available in Dojo, and give a sneak peak of the forthcoming Dojo 2.0 release.
Receive Our Latest Insights!