Frameworks

By | Coding | No Comments

Some interesting developments in frameworks — these metrics come from NPM downloads and give insight into framework popularity — you can see big growth with Express,¬†React, and jQuery (still!); and Angular (1.x probably) still holding strong; however VueJS rapidly catching up to Angular and likely to surpass soon (also note: webpack package manager is growing strongly in popularity):

Source: https://www.npmjs.com/npm/the-state-of-javascript-frameworks-2017-part-3-back-end-frameworks

Aurelia: Powerful ValueConverters

By | Coding | No Comments

This post is a quick observation of how flexible the valueconverters feature is. I won’t cover what valueConverters are because that is well covered else where (Eisenberg’s post).

However, I wanted to show a flexible use of. Let’s say the template row is returning an array of keys, which correspond to a list:

constructor(){
   this.optionList = [
       { value: 10, label: "Option 10", icon: "<i class='glyph-icon icon-coffee></i>" },
       { value: 20, label: "Option 20", icon: "<i class='glyph-icon icon-leaf></i>" },
       { value: 30, label: "Option 30", icon: "<i class='glyph-icon icon-star></i>" }
   ];
   this.selectedIdSet = [10,30];
}

export class LabelizeValueConverter {
   toView(valueArray, listArray) {
      var html = '';
      for(let val of valueArray){
         for( let i of listArray ){
            if( i.value==val )
               html += i.value+' '+i.icon+' ';
         }
      }
      return html;
   }
}

Now we can even pass in that array of options into the value converter (useful if we multiple option arrays we can use, and we want to use the same valueConverter).

<span innerhtml.bind="selectedIdSet | labelize: optionList"></span>

Aurelia: Model.bind vs value.bind

By | Uncategorized | No Comments

Just wanted to quickly post about this because generally I only care about value.binding for form submissions.

However, I just realized now what the model bind is good for (show’s how often I have used it!). It will bind the whole array entry to the form-item selected.

Okay example time — if this is the set of option choices:
constructor(){
   this.options= [
      {id:1, text:'Option 1'},
      {id:2, text:'Option 2'},
      {id:3, text:'Option 3'}
   ];

   this.selectedOption=this.options[0];
}

 

And the code [with a little bootstrap formatting] (in page.html, etc):

<div class="form-group">
   <div repeat.for="option of option"class="radio">
      <label>
         <input type="radio" name="periodOptions" model.bind="option" checked.bind="$parent.selectedOption"/>
         ${option.text}
       </label>
   </div>
</div>

 

Visually here’s what that looks like (code for dumping the “selectedOption” is show in the GIST below.

A running simplified GIST of this (by the almighty Aurelia developer Jeremy Danyow) at:

https://gist.run/?id=84eb0949ff63c3f10a1eff3c337f2c97

Aurelia: Select2

By | Uncategorized | No Comments

I really like the power of the select2 element, and needed to use it in an aurelia project.

There are a few aurelia custom elements out there, but of those I saw, none gave a very simple, lightweight wrapper that would allow me to use HTML within the multi-select.

This attached code does, just include these bundles:

jspm install jquery
jspm install select2
jspm install bootstrap
jspm install npm:select2-bootstrap-theme

Inside your controller, there are 2 variables you need: the “selected” array and the options listing.

The options listing has 3 keys: “value” (the option value), “label” (the text-label), and “label_full” (the html label, if this not included, it uses the text label).

For example in mycontroller.js:

this.selectedArray = [];
this.optionsArray = [
{label: “Option 1”, label_full: “<i class=’glyph-icon icon-book’></i> Option 1”, value: 10},
{label: “Option 2”, label_full: “<i class=’glyph-icon icon-coffee’></i> Option 2”, value: 20} ];

Now in your aurelia template include the custom element:

<require from=”_select2″></require>

And add the tags where you are using them:

<select2 name=”selectList” selected.bind=”selectedArray” options.bind=”optionsArray” placeholder=”Rewards” allow_clear=”true” style=’font-size:150%;’></select2>
What you will end up with a a powerful multi-select that can even have icons, like this:
Grab the code here:

Javascript Frameworks

By | Uncategorized | No Comments

Welcome, and thank you for coming.

In the last few years I’ve been hyper-involved with a plethora of technologies at some start-up companies. It’s been challenging and fun but at the same time stressful. My developers seemed to do things in a way that was not flexible to change, nor optimized for the situation.

Maybe I had the wrong people, but maybe I had to learn something.

So I started to re-learned all the latest client-side frameworks, and wow have solutions matured in a way that makes it much easier to package clean solutions.

But there’s one problem. There are too MANY javascript/client-side frameworks out there.

Our adventure into this over the next while is to first build a service that scans the whole web to find what frameworks are being used … from this I can at least figure out and suggest what is really worth knowing. Part of this challenge is going through the effort of an idea and boiling it down into a full-scale web solution. And I’ll share a good chunk of the code with you on github.

And after that it will be a top-down analysis of what the frameworks really have to offer and how future-proof they are.

We are going to be discussing the big guys in detail – Angular, Angular2, Angular4, React, Vue-JS, and Aurelia (not as popular, but a nicely done framework that is fairly clean ECMAScript 6 without boilerplate code).