For many software development teams, it is normal to use multiple programming languages. In recent years, however, Javascript has established itself as a unifying programming language, from server side programming to client side programming for either the web or mobile. If Javascript is your language of choice, you will find many frameworks available for your programming problem. Trends come and go very quickly in this industry, so what is true this year may change a year from now. Although there are many good frameworks to choose from, this article provides an overview of five of them, based on how influential they are in meeting the needs of today’s Javascript developers. It is beyond the scope of this article to provide instruction for how to program with each framework. However, let’s suppose we want to create a web-based tic-tac-toe game. As each framework is presented, we’ll explore how this game’s features can be further expanded. By the end of the article, perhaps one or more of these frameworks will resonate with you, and encourage you to examine in more detail how they might help you with your software development.

AngularJS

AngularJS has quickly won the hearts and minds of many web developers, becoming one of today’s best Javascript frameworks to work with. Its ability to declaratively mark up a web page with its built-in HTML extensions makes it an easy framework to get started with. As one becomes more familiar with AngularJS, the learning curve becomes steeper when more sophisticated solutions are required of it.

angular.figure1
Figure 1 demonstrates a standard starter HTML document that has been modified to declare it as an AngularJS app.

You will also notice in Figure 1 a non-standard HTML attribute, ng-app. At the heart of AngularJS are extensions to HTML called directives, which declaratively describe the behavior of a web page. Every AngularJS application declares ng-app, which sets up the framework for interacting with and/or dynamically modifying the Document Object Model (DOM). If you have ever programmed with the DOM API, you probably know how tricky this can be because of occasional differences between the different browser products. AngularJS is an alternative means of doing the same thing, but also affords you the benefit of browser-agnostic programming. With AngularJS, you no longer have to contend with vendor-specific quirks and can safely write code that works across all modern browsers.

Figure 1 also demonstrates a non-standard HTML element, tic-tac-toe. This directive is a custom element implemented to encapsulate the tic-tac-toe game.

Figures 2 through 5 demonstrate how capable a custom HTML element implemented by AngularJS can be:

NOTE: The below is four boxes. Do not resize.

Figure 2 - ready to begin
Figure 2 – ready to begin
Figure 3 - game in session
Figure 3 – game in session

 

Figure 4 - draw
Figure 4 – draw
Figure 5 - win
Figure 5 – win

 

The game’s rules and progression are completely managed internally by the tic-tac-toe directive’s programming. It guides the game, from its initial setup through its completion, ending in either a win or a draw. Where is the Javascript? All of the programming is maintained in a separate source file, tictactoe.js. At its core, the game board is implemented by a standard HTML table, styled with standard CSS to look the way we expect. The directive’s programming updates the game board’s appearance in real-time as the game progresses.

 

Ionic

Many new software applications target the mobile device as the primary platform. The industry has long accepted that developing a mobile app requires programming for two different platforms, each requiring a different programming language: Objective-C and, more recently, Swift, for iOS; and Java for Android. Each platform also has its own programming stack. Native application frameworks, however, are increasingly being challenged by advances in hybrid mobile application development. Hybrid mobile applications use the web browser to host the application. Skilled developers can make hybrid mobile apps look and behave as good as any native mobile application.

Ionic Framework is one such hybrid mobile development framework. The wonderful thing about Ionic is that it uses AngularJS as its primary, underlying Javascript framework. This means Ionic developers have access to virtually the entire Javascript ecosystem. The hypothetical tic-tac-toe game written in AngularJS can very easily be ported to Ionic and, therefore, be presented as a mobile application.

The Ionic command line interface (CLI) creates the scaffolding for a mobile app, generating the code necessary to get started. There are several templates to choose from. When you review the source files generated, they look much like the files commonly found in a standard web application project: HTML documents, Javascript files and CSS stylesheets. Figure 6 demonstrates a starter Ionic mobile app created with a blank template.

Figure 7 shows the result of the porting the AngularJS tic-tac-toe to Ionic.

Figure 6 - Ionic blank template
Figure 6 – Ionic blank template
Figure 7 - AngularJS tic-tac-toe ported
Figure 7 – AngularJS tic-tac-toe ported

 

 

The CLI has additional features for managing plugins, building the project, starting a local web server to aid with testing within a browser, generating splash screens and icons, and uploading the mobile app to a central repository, so you can share a preview link with friends.

If you work on a Mac, you get emulation services for both iOS (after installing Apple XCode) and Android. Later, you can also install Ionic View on your smartphone, a testing app that loads previews of your mobile app while it is still in development. Hyperlinks to your preview app can be shared with friends, and they too can take a look at the app with Ionic View before it becomes generally available on the Apple Store or Google Play.

 

Express

So far, our tic-tac-toe game requires both players to share a single keyboard and screen to play. Wouldn’t it be so much better to challenge a player in another location? We could provide a match-making service for our hypothetical tic-tac-toe game, so that the client application could join a game with http://www.playtictactoe.com/join/Bob, and the server application responding with (Figure 8)

:

Figure 8 - Patience is a virtue, Bob.
Figure 8 – Patience is a virtue, Bob

Additionally, perhaps player authentication should occur before a game of tic-tac-toe can start, or database operations need to be performed. For these and other features not possible/practical with a client application, one might choose to implement a server application to coordinate such remote games over the Internet. Express is a NodeJS application framework for developing web applications on the server. Because this is a NodeJS framework, you have access to virtually all of the Javascript libraries available. Server applications can provide Representational State Transfer (REST) services or generate dynamic web pages in response to requests originating from web or mobile  applications. Available to Express are many middleware plugins that provide all kinds of services: database connectivity, parsers, caching and many others — all often provided by a community of enthusiasts working to better enhance Express’ capabilities for the benefit of others.

Express is a mature web framework, having inspired other frameworks to be derived from it, such as Koa, Hapi and Sails.

 

Firebase

It is entirely possible to host a game of tic-tac-toe over the internet without the use of a server application. NoSQL databases are an alternative to traditional relational databases. Most, if not all, provide an API that can be accessed from Javascript. This means that a browser-based Javascript application can directly access a NoSQL database without the assistance of a server application.

Firebase is one such NoSQL service. It supports many frameworks, including AngularJS. With Firebase, one could coordinate a match-making service for our tic-tac-toe game, allowing the game to begin when two players have indicated they wish to play. Firebase data, as is all

NoSQL data, is stored as Javascript Object Notation (JSON). Figure 9 displays one possible schema for storing game sessions. When a player is waiting for another player, his name can be recorded. When a game is started, the opponents’ names can be recorded.

Figure 9 - No players yet
Figure 9 – No players yet

When each player takes a turn, his moves can be persisted to Firebase. The Firebase AngularJS API provides three-way binding that synchronizes data between the Firebase application, the view on the player’s screen and data stored on the player’s app. This means, in near-real time, when one player takes a turn the other player’s screen is updated. Figure 10 demonstrates a snapshot of how the Firebase application console might look while a game is in progress, and while another player is waiting for an opponent.

Figure 10 - Firebase console
Figure 10 – Firebase console

 

Meteor

An application framework called Meteor has thrown its hat into the hybrid mobile development ring. It goes one step further: Meteor provides a single API for a unified web-or-mobile user experience. You write your application exactly once, and you can choose how to deploy it: web, mobile or both. Further, Meteor provides the full stack of development tools needed. Everything a software developer needs is provided within the Meteor framework: the UI framework, the web framework, database connectivity, and deployment services. Where in most cases the Javascript developer is responsible for integrating all of the frameworks needed to implement a project, Meteor is an all-in-one solution. Meteor has its own developer community, and new components are being all the time.

 

Conclusion

The choices in front of Javascript developers are numerous, often overlapping in features. This can be overwhelming when attempting to weigh the various options. With many software projects choosing to target the mobile platform as the primary user experience, one way to reduce the number of choices is to choose among frameworks that most readily support mobile development. Frameworks that are able to target both mobile and web offer the most flexibility while reducing the development stack to the minimum necessary to achieve both aims.

Leave a Reply

Your email address will not be published. Required fields are marked *