JavaScript's plan to take over the World (Wide Web) is well under way. But the explosion of tools leveraging JavaScript's ascendancy make choosing the right one for the job challenging, to say the least.
Here are 11 emerging tools for using JavaScript (in concert with other languages) to create modern websites with all the features users have come to demand. They offer clean design and simple interfaces that can be deceptive because the tools are often quite powerful, too. All of the years of evolution and redesign are paying off with tools that do more of what we want with fewer configuration hassles.
Meteor
The seven principles underlying the Meteor Web app framework provide a solid foundation for modern software development. Some are practical, like embracing the open source community to facilitate plug-in contributions. Meteor does that. There are plenty of great plug-ins already.
Other principles are technical: Design a simple API, send only the data over the wire, and use the same language everywhere -- that is, for coding (JavaScript) and database access (MongoDB), which the founders have facilitated by building a local emulator for the client. The image shows some simple code creating a local Collection, a data structure that emulates MongoDB to store data locally. The same code can store data locally or in the back-end MongoDB server.
Epoch
Data visualization is all the rage on the Web. While there are many tools for creatively displaying data in eye-catching ways, few compare with D3.js.
Now, the folks who created Epoch have gone one step further. They've taken the basic D3 libraries and added enough piping to make them run smoothly and continuously in real time. You can now add clean, clear charts for your users that update as they watch. Dashboards have never been easier. The image shows a real-time bar chart that scrolls to the left as new data arrives.
Web Starter Kit
Building a Web app that works on one device is hard enough. Enter Google's Web Starter Kit, a project aimed at aiding developers in supporting multiple devices. That means synchronizing clicks, reloading when necessary, and keeping everything as lean as possible so that the screens remain in sync. If one user is on an old iPad and another is on a new Android phone, the code adapts.
You sketch out the look, and the build tool and the framework handle the details of making it look good on each screen. The image shows just one of many design suggestions that come with the project -- design suggestions that the team admits are "opinionated."
Reveal.js
Reveal.js is a slick HTML5-based replacement for PowerPoint. Click the buttons, and sophisticated animations flip between bits of information, just like PowerPoint. But the real power is how it can be leveraged within your Web strategy; if your website has a story to tell, Reveal can be exactly the right tool. Load up what you want your visitors to know, and Reveal will display your message in style.
The framework comes with a bonus: If you need to present the website at a talk, you have your slides done. The image shows one slide from a presentation on the transitions in Reveal.js.
RxJS
The days of the static Web page are long gone, and now even basic dynamic Web pages are starting to look boring. One new trend is to make websites more "reactive," so they begin to respond before the user clicks. The simplest examples are autofill boxes that offer suggestions as the user types. Why wait for the user to finish and click Search?
RxJS is a framework for adding smooth, reactive, and asynchronous responses to the stream of events generated by the mouse and keyboard. The image shows code for binding a search of Wikipedia to an event.
NodeBB
Opening your website or app to the contentious, combative vitriol of the Internet at large by hosting a forum isn't always rewarding, but it's certainly easier now thanks to NodeBB. The Node-based evolution of the bulletin board metaphor is responsive and customizable, offering real-time streaming of conversations. The developers of NodeBB have added modern themes and support for smaller screens on phones and tablets. They've also tossed in the latest interface touches, such as infinite scrolling. The image shows a NodeBB community devoted to building plug-ins for NodeBB.
GulpJS
A long time ago, people wrote HTML, CSS, and JavaScript from scratch -- how 20th century. JavaScript is now often compiled or built from shorthand syntaxes such as CoffeeScript. The CSS is built from a set of rules.
If you've often wished there was a simple way to automate all the processing that happens after you write your code,GulpJS is here to organize it all. You write a bit of JavaScript to specify the paths, then Gulp does the rest. It's like Ant or Maven for Java, but this time they used the native language (JavaScript) to specify the work instead of XML. The image shows a snippet of code for minifying and cleaning up some JavaScript.
AngularJS
Google built AngularJS to offer a smooth, lightweight framework for presenting information in the browser. It collects data from the server, then compiles the templates locally for presentation. In other words, it's a Model-View-Controller framework built out of HTML, JavaScript, and CSS to run in the browser. The server code handles data storage, and the AngularJS code is responsible for presentation. It’s compatible with desktop browsers, tablets, and phones.
The image shows a snippet from an Angular template that mixes Angular code in curly brackets with raw HTML.
Odyssey
Adding maps to a website has never been easier, thanks to the full APIs offered by the competing companies. Telling a story just requires some words. What if you want to mix the two? That's the objective of CartoDB's Odyssey, a tool for mixing story and maps with features like "slipping map interactions" bound to parts of the text. The image shows a sandbox for building stories that interact with maps.
PlayCanvas
In theory, games are something separate that only gamers build. They're completely different from Web apps and other things that serious people do with their serious time.
In reality, all of the tools from the game world can be useful for adding slick interfaces to websites. PlayCanvas is a game engine built around WebGL. It combines physics, lighting, shadows, audio, and more into a coherent tool for creating a world filled with objects. The image shows an online development tool for the framework.
Deb.js
We all make mistakes. The way we fix them, though, makes all of the difference. Deb.js is a small file -- about 1.5KB -- but it cleans up the console window, so it's easier to debug JavaScript. It's the next necessity after FireBug and the built-in debuggers in Chrome, Opera, and Safari. The image shows a stack trace.
0 comments:
Post a Comment