Shorter syntax for Node.js module import

I’ve found myself writing a lot of import module statements during React development that I could have shortened. It’s a bit dispiriting when everything above the fold in your code is a boilerplate import. To give an example – this very simple React page

(this demo app is so bland I actually tarted up the image in photoshop – and it’s still bland)

Is constructed from this component

Even in this simple example, I’ve a bunch of imports from the same Alerts module. This could potentially go on and on and has done when I’m using something like React-Bootstrap. It’s not pretty. Happily this can all be shortened to one line thus

When I first saw this I found it baffling and unexplained – especially when just importing 1 object from a module e.g.

Suddenly there is curly brackets in the way. What’s all that about?

It’s all in the Destructure

It’s using ES6 object destructuring to do this magic. A simple example of object destructuring would be

The first object is automatically split into 2 variable when assigned – this is the destructuring

So our react import is the same as this in essence. Label.jsx is the component (object) we are importing

The export at the end is what is going to be destructured – we could simplify this further and omit the property names (with more ES6)

Anyway that’s not strictly relevant. Explaining onwards – the require squirts out the object and the destructuring assigns it to 3 variables which we can use in our page

This can be rewritten as an ES6 import statement which will transpile down into require with something like Babel if need be.

It’s this form in particular I often see in code samples and the like. So that’s explained then and a little bit of the grey fog has lifted. Lovely.

Useful Links

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
ES6 Destructuring – good detailed explanation

https://blog.risingstack.com/node-js-at-scale-module-system-commonjs-require/
This is all underpinned by Node.js CommonJS module load pattern – that’s the require bit. More detail above.

https://github.com/timbrownls20/Demo/tree/master/React/CommonJSDemo
The sample code isn’t much but as ever the code is on my GitHub site. It’s using webpack as the task runner which is different to the gulp runner I’ve been using. Probably better if I’m honest.

 

 

Another Free JavaScript Book

My least viewed blog post is the one about a free JavaScript book. So building on that lack of success here is another post about another free JavaScript book. You don’t know JS: Up and Going by Kyle Simpson is currently retailing for zero pounds and zero pence (or zero dollars if you prefer) at Amazon kindle store and it is worth a read.

It’s a brief trailer for the other 5 pay for books in the series but does a good job of going over the basics and the not so basics. Mr Kyle makes the interesting, and probably correct, argument that it’s possible to write entire applications in JavaScript without knowing a lot of the language. It certainly accords with my own experience – there is a lot of dodgy JavaScript around and not so much well crafted stuff. So he’s issued a bit of a call to arms for developers to learn all the language and not just the ‘Good Parts’.

I’m not sure if I’m going to read all the books in the series but I’ve bought the ES6 one and that’s also very good but sadly not free. I guess the man’s got to be paid somehow.

Better Numeric Range Input with ASP.NET MVC, HTML5 and JQuery

The Sin

I recently wrote this horrible code to generate a drop down box to select any number from 1 to 12.

Ouch! It was only a test harness but after an hour I still got sick of looking at it. It’s a sin that needs to be atoned for.

The Penance

For my penance I’ve said 5 Hail Marys and identified three better ways to generate numeric range dropdowns.

Using Enumerable.Range

If I want to stick with MVC and C# then there is a static method on Enumerable that will generate sequences of numbers i.e.

Will output 1 through to 12 as a list of ints. Leveraging this, my grotesque piece of Razor becomes

Which renders out as a normal dropdown as before

Enumerable.Range

Much better.

Using HTML5

Of course we don’t even need to get into C#. If we’ve got the luxury of a modern browser we can just use HTML5 to give us a slider control.

Which renders as

HTML5

Better again.

Using JQuery

If you don’t have the luxury of a modern browser then you can fall back to JQuery UI which has a larger range of supported browsers. The code isn’t that much more but of course you need to reference JQuery and JQuery UI libraries. It’s another slider type control and the implementation is

Which looks like

JQuery UI

So much nicer.

The Atonement

To atone for my sin I swapped out the horrible code for the Enumerable.Range implementation. I think that’s my preference really. I don’t really want to include a whole bunch of scripts and css to get a decent control (JQuery) and I don’t want to limit myself to the latest and greatest browsers (HTML5). Beside I think Enumerable.Range is little known but pretty smart and let’s face it – who doesn’t want to be little known but pretty smart.

Useful links

https://www.dotnetperls.com/enumerable-range
Nice article on Enumerable.Range

http://www.htmlgoodies.com/html5/tutorials/whats-new-in-html5-forms-handling-numeric-inputs-using-the-number-and-range-input-types.html
More on the HTML slider control

https://jqueryui.com/slider/
Official documentation for the JQueryUI slider control

https://github.com/timbrownls20/Demo/blob/master/ASP.NET%20Core/Demo/Demo/Views/Demo/NumericDropdown.cshtml
As always there are code sample of all implementations on my git hub site.

 

Free Book: JavaScript Best Practice

getting MEANA quick one. Most web developers can write JavaScript and I suspect it’s on most developer’s CVs somewhere. But it’s easy to write bad JavaScript and not so easy to write the good stuff. I guess it’s because JavaScript itself is so free and easy. It isn’t opinionated.

So I thought this JavaScript best practice primer was an excellent read and it’s freely available. It’s an online bonus appendix to Simon Holme’s Getting MEAN book. The book itself is really good and worth a read if you are interested in the MEAN stack. The appendix though is like multi vitamins – it’s good for everyone.

Even though I’ve been writing JavaScript on and off for years it still showed me a thing or two. It covers things like

  1. Variable hoisting
  2. Block and global scope
  3. Callbacks
  4. Comparison operators
  5. Object orientated coding including IIFE
  6. And more ….

Only takes half an hour or so to read and I’m a slow reader. One to recommend to family and friends. It’s certainly what my Mum is getting next Christmas.