Some javascript resources

Developers
#1

Hi,

During the last few days, a few people asked about how to re-learn javascript, I wanted to share a few resources I’ve found useful:

A great starting point to catch up on newer version of javascripts (that we of course support) is https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript It has quite a few code examples and background on things.

ES6 syntax is “new” but worth highlighting a few parts:

Arrow functions
Classes
Template literals
let
and const

For learning react - I found the react toutrial useful to get started.

lastly, you might have have heard we recently merged redux - I found the following free online courses (each episode is about 2-5 minutes) really worth the time: https://egghead.io/courses/getting-started-with-redux

On the day to day, I also started to use prettier which I see as a anti bikeshedding tool for syntax, whitespaces etc.

another nice package worth mentioning is lebab (opposite of babel) which knows (sometimes) how to convert “old” JavaScript to newer / modern syntax.

I personally also like using Jest for testing which we now also use in the SUI.

comments, suggestions or questions are very welcomed :slight_smile:

3 Likes
#2

Wow - this is a great list. I particularly like the mention of lebab…

I find ES6 + React to be very powerful. It is strict enough with propTypes to specify types - and gives you the versatility of a loosely typed language everywhere else (babel also does a great job keeping the language semantics up to date w/ the new specs as they come out). I particularly enjoy the new features around destructuring added in ES6 and find myself using them daily ;).

In comparison with other frameworks, I find React + Redux to be a wonderful abstraction that values single source of truth, functional programming (in the classical sense), proper code separation and encapsulation, and highly optimized rendering paths (w/ virtual dom now and async rendering right around the corner!). It also makes the developer experience awesome! Things like React DevTools and Redux DevTools alongside the other links mentioned are a perfect example of this. “Lifting state” is also a common expression that goes along here - we can reduce the surface area for bugs and write much cleaner components in the process.

Prettier seems to be one of the best formed community standards since I can last remember. Having an AST parse my JS and tell me immediately when something is wrong and format all of my code on save immediately is just amazing! It can be opinionated at times, but I much prefer following community standards like Standard JS than inventing my own. It’s also great that Prettier will fix many of these eslint rules automatically…

I.m.h.o. React and its ecosystem is definitely more than a framework at this point, it is a way of thinking about writing the best abstractions possible! And last I checked, React was #1 on npmcharts. I certainly hope it stays this way for a very long time!

1 Like
#3

I agree that propTypes is not bad but with such a large project as ManageIQ I prefer TypeScript. It provides a way to implement type checking everywhere and a more opinionated way to write code. Something that is useful in a large community.

This project provides a nice starting point for hacking React+Redux+TypeScript: