CMBJS: Javascript Reloaded

272

I work with Javascript, which is sad because the language is garbage. Yet we use it for everything from developing web pages to shell scripts to IOT stuff. We are stuck with it. – Nadeesha Cabral

Javascript developers may not get a lot of respect, but their language of choice is powerful. Whether it’s building a server, programming a robot or a simply making a well-designed web page more interactive, Javascript does it all. Across the web, you’ll find numerous examples of powerful Javascript applications.

This is why we dropped by the WSO2 Office on Duplication Road yesterday evening for another Colombo Javascript meetup. What did we learn alongside 100 Javascript geeks? Read on and find out.

Playing with React and Flux

The first speaker of the day was Hasitha Liyanage, CTO of ThinkCube who decided to tackle React.js as his topic. React.js in case you’re lost is a Reactive, Component Based Javascript UI Library from Facebook with poor documentation.

Hasitha Liyanage, CTO of ThinkCube introducing the attendees to React.js and Flux
Hasitha Liyanage, CTO of ThinkCube introducing the attendees to React.js and Flux

 

Let’s simplify that a bit. Reactive means that if any data is updated, then any component displaying that data in your UI is automatically updated.

Yes, in React you would break down your Javascript application into many independent components. This is where it becomes a Component Based library. Each  component only manipulates the data & logic related to itself without worrying about the environment. Afterwards, it renders the necessary HTML code to update the UI.

The beauty of this component based approach is that it eliminates complexity as a person developing one component doesn’t have to worry about other components. All with the power of a single Javascript file.

That is React in a very simplified nutshell. If you’re a curious Developer, then you can head over to facebook.github.io/react to get started with React.

However, before you go we should point out that React has a problem: it only gives you the UI elements. It doesn’t give you the things you need to retrieve and do operations on data.

This is where Flux comes in. Now Flux is not something you can download. This a set of guidelines for an architecture that solves the React’s problem and simplifies the process of developing web apps.

To implement the Flux architecture you will need to do the following:

  • Have a data store that contains data. As an example: Hasitha referred to database table being a data store for blog posts in a blog.
  • The store has functions related to that specific store. Some examples of such functions are: to create blog posts, delete blog posts and edit blog posts.
  • These functions are executed by the components with actions.
  • Once data has been updated in the store, a change signal is emitted by the store which components listens to and updates their data accordingly.
  • All this is handled by a single dispatcher which collects actions and sends it to the store.

Javascript ver.2015

The second presenter of the day was Nadeeshaa Cabral, a consultant Javascript developer. His presentation was focused on the latest Javascript techniques and tools for Javascript developers.

Nadeesha Cabral, consultant Javascript developer introducing the latest Javascript trends to the attendees
Nadeesha Cabral, consultant Javascript developer introducing the latest Javascript trends to the attendees

Nadeesha opened his presentation with a trend called Data immutability. This is where data doesn’t change its state over time. An example being rather than updating an array with a new element, you clone the array, add the new element and destroy the old array.

This sounds like it’ll use quite of a bit of computing power. Turns out that it actually does but that’s perfectly fine. This is because Javascript is faster at creating new objects compared to find and updating them. So there are performance gains but they might not be visible unless you have 10,000+ variables.

Nadeesha then introduced us to another trend called unidirectional data flows. This is where data only in one direction. In a normal Javascript application this rarely (never) happens, especially with the infamous MVC architecture. As such, applications are more complex than they should be.

With a unidirectional data flow, the code of your Javascript applications will become so much simpler. The best example of this according to Nadeesha is the Flux architecture which Hasitha covered.

The third trend Nadeesha touched on is Functional Reactive Programming. Here we don’t tell the computer what to do step by step. instead, the very simple idea behind Functional Reactive Programming is that we only tell the computer what to do with only the basic steps.

The final trend Nadeesha touched on is moving away from frameworks and towards libraries. For those of you who are new to Javascript: a framework is a set of files with various features, that help you develop Javascript applications in a very specific way. A library on the other hand simply gives you a set of functions you can use to build your Javascript application.

Both frameworks and libraries give you functions to help build your Javascript application. So why is this trend happening? The answer for that is the one difference between the two: a framework influences how your application will be developed whereas a library does not.

Assume you don’t know the future of your application. Assume your product manager will lie to you. Always use libraries. – Nadeesha Cabral

With a library, you can develop your Javascript applications exactly the way you want. There is nothing telling you that things have to work in this specific manner, as in a framework. In other words, the framework decides what your application looks like and not you. You are not in control, as such the future of your Javascript application very uncertain with frameworks.

After introducing us to the latest trends, Nadeesha shared a few tools that every Javascript developer might find useful. These tools are:

Javascript with Adobe apps

The final speaker of the day was Thameera Senanayaka, a tech lead from Allion Technologies. Thameera’s topic of choice was introducing everyone to Javascripting with Adobe.

Thameera Senanayake, Tech lead from Allion Technologies explaining how to use Javascript in Adobe apps
Thameera Senanayaka, Tech lead from Allion Technologies explaining how to use Javascript in Adobe apps

Now Adobe has a lot of software. Many of these software’s allow you to write scripts to automate things with Javascript. How? The Adobe ExtendScript Toolkit, which is a minimalist IDE that lets you write Javascript code to automate various tasks in Adobe apps.

In his demo, Thameera showed us how the ExtendScript Toolkit could be used to create snowflakes in Photoshop. All of them automatically thanks to the power of Javascript.

However, that’s just kid’s stuff. You can take things a step further and build extensions with Javascript, HTML5 and CSS. Photoshop even comes with Chrome Devtools to make you feel more at home when building these extensions.

However, there are limits. When it comes to image processing, Javascript is as slow as snails. Furthermore, the ExtendScript Toolkit doesn’t have features like autocomplete so it won’t be replacing your IDE anytime soon.

Conclusion

With the end of Thameera’s presentation, the meetup drew to a close. We wrapped up, grabbed a few refreshments and went on our way home. For some of us it was to experiment with what we learned today and others brushing up on our Javascript.

2 COMMENTS

  1. Thanks for the article and this is awesome.
    I need to do one correction about nadeesha’s talk.

    While he may have talked about JS developer respect, that’s not the core of his talk. It was about using new tools and techniques of JS.

    BTW: JS developers has a pretty good respect. It’s very hard to find good JS developers in SL. Companies, dying for find good JS developers.

    In the global Dev space, JS developers rocks. No one is going to mess with us. We will implement his favorite things in JS 😀

LEAVE A REPLY

Please enter your comment!
Please enter your name here