Imagine a bacon-wrapped Ferrari. Still not better than our free technical reports.
See all our reports

JavaScript Confessions: 12 JS technologies I’m not ashamed of loving

New technologies fly by like the wind–and yes, sometimes geeks are also philosophical. Continued technology evolutions are common, frequently seeing new technologies come to aid of existing ones. That’s what we call polyglotism. So why look only at Java?

In a recent post by my fellow author Oleg Shelajev called JavaScript: Explain it like I’m a Java Developer, we started looking into the dark side a bit more. Lately, I’ve been working on a great JavaFX project called SlideshowFX, which allows you to create HTML5 slide decks. Out of necessity, I found myself looking for nice JavaScript APIs to create awesome presentations. In the end, I found some and yes, I like them. Don’t judge me!

Like many of you, I used to generally dislike JavaScript–and then Nashorn happened. Since around then, I’ve been starting to change my mind about JS. So, let’s share some cool libs and why they can possibly help you.

Check out TimelineJS for creating beautiful timelines

Timeline.js

In a presentation, you’ll probably notice that it’s often useful to display a timeline with various dates and times. If you do it with some PowerPoint-like applications, it can be a pain in your @$$. If you’re in a web context (no no no, not your JavaEE one!), I cannot recommend TimelineJS enough. It’s free and can be embedded in your website (or SlideshowFX presentation). All configuration is done in JSON and you can insert images, tweets, videos from YouTube as well as many other cool stuff. The final result will totally impress your audience.

Try Highcharts for graphics that aren’t just for managers

Highcharts

Charts quickly give your audience a quick overview and understanding about numbers. PowerPoint allows you to easily create beautiful one and for web, I love Highcharts. It has so many options and chart types that you will certainly be able to find whatever you need to fit your chart requirements. What I really like is that they are fully customizable and interactive: you can click on them, hide and show series, zoom in and out, which PowerPoint won’t be able to enable! Again configuration is done using JSON.

JointJS and RaphaelJS for making diagrams cool

Diagrams with shapes are really useful too, but it can be a pain to draw some in web pages. JointJS tries to help you with that. Indeed the library is based on RaphaelJS and allows you to integrate diagrams into your pages. The learning curve is a bit high, but after you get used to it, your diagram elements moved, linked, embedded and so on. Everything is customizable, like links between elements, shapes and so on. Some extensions are available for dealing with UML, so you have no excuses to create geeky diagrams in your HTML.

Use JS Sequence Diagram and JUMLY for diagramming sequences

JS sequence diagrams

I don’t know if it’s the software architect in me, but I really love hand-writing diagram sequences. It is much more personal. Sequences allow you to describe workflows visually, but I also use them to easily illustrate a conversation between individuals. And for this I’ve found JS sequence diagram, which defines a really simple syntax for creating diagrams. And you have two main style: hand-drawn and simple. So you can embed it in your pages with little effort.

If you have to do much more professional-like sequences, you can try JUMLY, which allows you to customize all elements. But I prefer the syntax of JS sequence diagram: JUMLY is “whitespace intolerant” which can easily bring a lot of complexity in reading and writing the syntax. Again, once you’re used to this, it becomes simple.

Try SweetAlert for, well, sweeter alerts…

Sweet alerts

This one is very visually satisfying. When you’re doing web pages, you often use alert(…) in order to warn the user. But you will agree with me when I say that these are kind of ugly and old school looking things. So I discovered a really nice replacement, which is called SweetAlert and allows to show beautiful alerts that are fully customizable and centered on the screen. The integration is really easy and a cool result is produced.

Use HighlightJS for showing off your beautiful code

PowerPoint-like tools are not dev friendly, right? Why? Because when you want to show some code, you just have plain text … with no colors! So you always have to color it yourself (such 80s wow). In a web environment, you can use highlight.js to let you insert code in your pages and color it for you. Plenty of languages are supported (even the ones you even don’t know they exist) so you should be able to find everything you’re looking for.

Check out Ace for the live coder in you

Not all devs are created equal–some of us are geeks, and some of us are non-geek developers. Regardless, we all code, right? So why not try live coding or integrating an editor into your web page or app? Well, if you find a use case for this, then you’ll need a good editor. I found out about Ace, part of the powerful, web-based Cloud9 IDE, which you can integrate into your own pages to bring a lot of the features you’ll find on any desktop IDE. So if you need something like that feel free to get, integrate and enjoy it.

Try TagCanvas and D3 for interactive tag clouds

TagCanvas (example)

Sometimes introducing a concept, giving ideas or just representing your thoughts is super difficult. On the web, you find a lot of word clouds, so why not include one in your pages? There are a lot out there but the simplest one I’ve found is TagCanvas which has no dependencies and is pretty straightforward to use. The nice thing about it is that the cloud is “following” your cursor, which brings some interactivity to your pages. But you can also define an action when a word is clicked, for example to redirect the user on another page. Great! You can also use d3-cloud which require D3 which is an awesome JavaScript library for manipulating data.

Go on a tour with Intro.js

Imagine you’re a powerful geek that wants to demonstrate how to develop in JavaFX. You want to make it step by step, but in PowerPoint, how do you do that? (Hint: slide after slide) Well, even my grandma would find this to antiquated. You’re in web apps, so do it that way. I’ve found Intro.js that allows you to make beautiful tours of your app. Start with that, next do this and finally the awesomeness is this little box. It’s really very interactive and you will amaze your readers/audience.

Final words

Polyglotism is pretty much here to stay, so you can be all hardcore and refuse to learn about heavily-embraced technologies, standards and languages if you want to, but at your own risk. I hope this short overview of these 12 tools was useful to you, and please let me know your thoughts in the comments below or by tweeting @twasyl. Happy coding!


MORE POSTS BY THIERRY