SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)

    This Week in JavaScript - 13 January 2014

    Your weekly update of interesting happenings in the world of JavaScript - feel free to discuss, and help to bring some new ideas to light.

    From around the web

    Introduction to HTML5 Desktop Apps With Node-Webkit
    What is React? (and why do we need it)
    Beyond pushState — building single page applications
    Google Dart target: Chrome soon! Other browsers...someday

    For the techies

    Meta-programming JavaScript Using Proxies
    Functional JavaScript for crawling the Web
    Closures in JavaScript — same problem, different day
    JS Trailing Comma Remover

    Resources

    JavaScript Patterns Collection — also covering antipatterns
    Interesting frontend webdevelopment links from 2012/2013 — with nice JavaScript section
    50 Javascript Tools & Resources from 2013
    Developer and Power Users Tool List for Windows — including a couple of JS gems.

    Libraries

    visage|SDK for HTML5 — face tracking in JavaScript
    countUp.js — dependency-free, lightweight JavaScript "class" to create animations with numerical data
    Semicolon.js — the most useful JavaScript library for cargo cult programmers
    International Telephone Input — adds a flag dropdown to any input, which lists all the countries and their international dial codes next to their flags

    So what do you make of these recent going ons?

    Is node-webkit the next big thing? Are you still confused by closures? Do you have your own list of resources to share?

    Either way, we'd be glad to hear your opinion.

    Please PM us if you have anything of interest for the next issue, and happy reading! - Paul & Pullo

  2. #2
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    I keep stumbling across React by I can't seem to find the time for it, just like the author of the What is React? article.

    The fact that it completely mocks the DOM and only touching the real thing when it needs to, that's one thing that I find reason enough to get into it.

    Also, nice article about Google Dart, very interesting read.

  3. #3
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Very good write-up and completely agree with the author about Functional Programming in JavaScript.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by myty View Post
    I keep stumbling across React by I can't seem to find the time for it, just like the author of the What is React? article.
    I know the feeling
    I've heard about it, but hadn't had time to look at it in any detail either.
    However after reading this, it has made its way to the upper part of my "To look at when I've got time" list, along with Ember, POODR and running MacOS in VirtualBox.

    Quote Originally Posted by myty View Post
    Also, nice article about Google Dart, very interesting read.
    Do you have any thoughts about whether this would be a good or a bad thing?
    At first glance it seems an exciting development, but on the other hand it runs the danger of fragmenting the ecosystem and as Mr Eich says, two VMs, with their own GC and both attempting to interact with the DOM sounds a bit like a recipe for disaster.

  5. #5
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    I'm not Dart fan as of yet, who knows, maybe I'll never really dive into it.

    And what I'd really like to try is TypeScript, if only there were some other tools beside Visual Studio that integrates it so well and that would allow me to really consume it, because is still so JavaScript-ish.

    But I believe any of these two build up for the next JavaScript, and that's a very good thing. No need to worry, panic or get mad here.

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,825
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    With the JavaScript Pattern Collection many of the conditional patters should be replaced by a switch statement.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Thanks felgall.

    I've not had a chance to look at all of those patterns yet (there are a lot).
    Would you mind giving a concrete example of one or two which should be replaced.

  8. #8
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    With the JavaScript Pattern Collection many of the conditional patters should be replaced by a switch statement.
    ... because of:

    - esthetics
    - readability
    - performance
    <snip/>

    <snip/> I do expect some background information, tests, you know, stuff that makes people believe.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    I too would be genuinely interested to hear this (hence my question), but please let's proceed in a polite fashion.

  10. #10
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    I too would be genuinely interested to hear this (hence my question), but please let's proceed in a polite fashion.
    Sorry, Pullo, just reached a point I guess. Programming is not a cult, you're required to seek and to question, you're required to showcase and to prove.

    When it comes to such differences, sometimes readability can trump performance, sometimes terseness can trump readability.

    One can't just throw "should" because it's simply never true for everybody at once, but one should make a valid point as to why some use cases may benefit. Call it programmer's politeness.

    In the case of if-else vs. switch, there is no relevant conclusion. The performance difference is too small, browser results are not one-sided and the agreement is to use whatever serves you best.

    Some interesting points are that switch could be implemented as a look-up table, while if-else has the liberty to augment the conditional on each branch.

    Finally, while one could emulate certain parts of the other, and while the reverse may also be true, there is no strict equivalence between if-else and switch.

  11. #11
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I'll be looking at react also, it's the first concept I know of that is challenging the idea of templates building a big string and updating the DOM directly.

  12. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,825
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Under the second link - conditionals

    Code:
    if (value == 0) {
            return result0;
    } else if (value == 1) {
            return result1;
    } else if (value == 2) {
            return result2;
    } else if (value == 3) {
            return result3;
    } else if (value == 4) {
             return result4;
    } else if (value == 5) {
             return result5;
    } else if (value == 6) {
             return result6;
    } else if (value == 7) {
            return result7;
    } else if (value == 8) {
            return result8;
    } else if (value == 9) {
            return result9;
    } else {
            return result10;
    }
    Is better written using a lot less code as:

    Code:
    switch(value ) {
          case 0: return result0;
          case 1: return result1;
          case 2: return result2;
          case 3: return result3;
          case 4: return result4;
          case 5: return result5;
          case 6: return result6;
          case 7: return result7;
          case 8: return result8;
          case 9: return result9;
          default: return result10;
    }
    or even as:

    Code:
    var retArray = [result0, result1, result2, result3, result4, result5, result6, result7, result8, result9];
    if (value >= 0 && value <= 9) return resArray[value];
    else return result10;
    I haven't looked at all the patterns but while all the ones I looked at that they say are bad basically are bad, not all of the ones they offer as better alternatives are necessarily the appropriate alternative. There are some quite good patterns there though as well.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  13. #13
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,276
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Under the second link - conditionals ... Is better written using a lot less code as:
    Admittedly the original author wasn't at all clear. I myself had to re-read it a few times to understand what he was trying to show with his code, especially since that long chain of if-else you quoted was, according to the author, a "binary search", which of course it isn't. I finally realized that the author was giving us a kind of before-and-after picture.

    Before:

    Code:
    if (value == 0) {
            return result0;
    } else if (value == 1) {
            return result1;
    } else if (value == 2) {
            return result2;
    } else if (value == 3) {
            return result3;
    } else if (value == 4) {
            return result4;
    } else if (value == 5) {
            return result5;
    } else if (value == 6) {
            return result6;
    } else if (value == 7) {
            return result7;
    } else if (value == 8) {
            return result8;
    } else if (value == 9) {
            return result9;
    } else {
            return result10;
    }
    And after (this is the actual binary search):

    Code:
    if (value < 6) {
            if (value < 3) {
                    if (value == 0) {
                            return result0;
                    } else if (value == 1) {
                            return result1;
                    } else {
                            return result2;
                    }
            } else {
                    if (value == 3) {
                            return result3;
                    } else if (value == 4) {
                            return result4;
                    } else {
                            return result5;
                    }
            }
    } else {
            if (value < 8) {
                    if (value == 6) {
                            return result6;
                    } else {
                            return result7;
                    }
            } else {
                    if (value == 8) {
                            return result8;
                    } else if (value == 9) {
                            return result9;
                    } else {
                            return result10;
                    }
            }
    }
    "First make it work. Then make it better."

  14. #14
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,182
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    I would call that "hybrid" not binary.

    TBH I think I prefer the series of if-else over the hybrid.

    Though the example is simple so I imagine in some cases where the conditionals are testing for a lot of different things (not "ranges of values for which to test") a hybrid would be better. eg.

    if($logged_in){
    if(!empty($user_id)){
    //etc.
    } else {
    //whatever
    }
    } else {
    do_login();
    }

  15. #15
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,825
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Jeff Mott View Post
    Admittedly the original author wasn't at all clear. I myself had to re-read it a few times to understand what he was trying to show with his code, especially since that long chain of if-else you quoted was, according to the author, a "binary search", which of course it isn't. I finally realized that the author was giving us a kind of before-and-after picture.
    Even though the code I quoted was the before - the after should have been one of the two alternatives that I posted - the switch statement or the array and not the less efficient and much harder to read alternative that was provided.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  16. #16
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,825
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    One further thought on that pattern for comparing a value to numbers.

    If we know that the value will always be an integer between 0 and 10 then no comparisons are needed at all to return the appropriate one of the eleven values - you can do it in the return statement:


    Code:
    return [result0, result1, result2, result3, result4, result5, result6, result7, result8, result9, result10][value];
    That makes use of the value as an offset into the array doing away with the need to compare anything.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •