11 essential JavaScript tools for Web developers (Part 1)

Diem Do

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.




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.






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 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.






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.t.






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.



Part 2 

Share the news now

Source : infoworld.com