A Simple Kind of Man

One of the cool parts of most Javascript frameworks these days is templating.  Each one approaches is a bit differently- React has you write jsx- basically html in your Javascript file.  Angular has you write Javascript in your html files- binding to events and interpolating variables.  Hell- you can even create your own templating system without too much trouble with ES6 templating strings.

In general, this is useful for the developer writing the code and the developer reading the code.  The writer has access to variables, functions, and other functionality right in the html.  You can perform simple logic checks, math, and even use ternary operators as well.  The reader can usually see what the writer was intending and has an easier time updating and extending the functionality.

I said ‘usually’ because I did manage to make an html template loop in our Angular 2 application that is quite hard to understand.  I guess no framework is completely foolproof.

Angular allows for looping in templates: *ngFor=”let item of array” allows you to loop over an array and display the info (I believe you can also iterate over an object’s keys, though it requires a custom pipe).  In my case, I used it to finish the display aspect of a pagination feature.  The template for loop iterates over the array of page numbers and displays each.  Throw a (click)=”setGrid(start)” on each one, and you have paging functionality.

But it got more complex.  The array contains the number for the first item on each page.  So, if the user has it set to display 10 items on a page, the array for the first 5 pages is [1, 11, 21, 31, 41].  They can change that, so if they have 50 items on a page, it’s [1, 51, 101, 151, 201] – you get the idea.  The number that should actually display, however, is different: 1, 2, 3, 4, 5.  So, setting up the onclick functionality was fairly simple- pass the actual number in the array and you’ll get the listing starting with that item:

*ngFor="let start of paginationArrayDisplay"
(click)="setGrid(start);"

Works fine- but how to display the correct numbers. Well, that’s not too complicated either.  You can take the ‘start’ variable (the number for the first item on the page being navigated to), subtract 1 to account for the zero indexing, then divide that by the maxItemsOnPage variable (a variable tracking what the user has set to be the number of items displayed on one page) plus 1 (to account on that side as well).  So, if it’s page 3 (start = 21, display should be 3), you would get 21 – 1 (20), divided by 10 (2) plus 1 (3!).  Maybe not super simple, but nothing crazy, and it works.

But then there’s an edge case – page one.  If you follow the formula above for page one, you get zero (1 – 1 = 0 and 0 divided by anything is 0).  Again, not a complicated case, but it has to be accounted for in the template loop.  I tried moving all this logic to the component instead, but doing so only loops the same page number over and over (so your page navigation buttons work, but all display “1”).

Long story short (too late!), this is the code that displays the page number in the for loop in my template:

{{(start - 1) / _paginationService.maxItemsOnPage === 0 ? 1 : ((start - 1) / _paginationService.maxItemsOnPage) + 1}}

Ugh. I don’t like looking at that.  If the formula spits out zero, it sets the page display in the numbering list to 1.  Otherwise, the number it spits out is the correct page number.

I bike to work most days.  This is not bragging- I don’t do it out of any sense of environmental conservation, I just can’t stand driving and/or parking downtown.  But it gives me about 30 minutes of podcast listening.  Recently, I was listening to The Changelog– a great podcast that interviews programmers about various topics- but generally about their life story.  One recent episode interviewed Sandy Metz – a veteran programmer and writer.  She had great thoughts about code complexity- we all hate to do it, we all hate to read it and try to figure it out when others do it, but sometimes, it’s necessary.  Programming can be a complex process- and though this used to be the realm of the backend dev, Javascript frameworks have pushed it into the world of the frontend as well.

So I’m keeping my complicated html template logic for now.  Maybe someone will fix it in the future and they’ll get to see my <!–SORRY ABOUT THIS–> comment.  Maybe it will make them smile instead of cursing my name.

Probably not, but maybe.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s