Thursday, July 17, 2014

msg'ing about angular vs jquery

Pity my team's poor intern Patrick, having to listen to me pontificate about the old days of programming and grumble about some of the toolkits gaining in popularity... but maybe it was edumacational for him, a little...

[5:03 PM] Kirk : since i graduated in the mid-90s, I've always been a bit "full stack". but I've always run a few websites on my own, generally built "from scratch" (in Perl CGI), so I had great experience that some of my peers didn't in the front end, but also cheap backends to make it all work
  My blog http://kirk.is/ I've been running for 12+ years (it's morphed into something like a tumblr, but it started when "blog'" as a concept was kind of new and fresh)
  and http://loveblender.com/ -- that's been almost 20(!) in one form another, and is also a bunch of Perl CGI, with a big revamp around 10 years ago or so
  But I was weak on some of the newer front end stuff -- HTML5, and what CSS could do, and ESPECIALLY a cool tool called jQuery
  until I came to Pearson Education/Alleyoop.com, and they let me play a "UI Engineer" and I caught up
  I was there for 3 years, learned a ton
  jQuery is awesome, especially partnering with semi-advanced CSS/HTML5 -- doing animations and what not
  really changed my vision of what was feasible for me to do in the browser
  (for example, I semi-whipped up http://jpporchfest.org/ -- most of the coolest parts are Google Maps, but the whole page is a nice hack of some interactive stuff)
  ANYWAY
  So I get here, and a few months before I got here they voted and decided to go the angular.js route
  Angular is known to have a steep learning curve,
  it uses some arcane syntax
  and honestly, I'm not sold that the best way to be is "write your own tags".
[5:08 PM] Patrick : yeah, i pretty much just stared at it for about a full week until it clicked finally lol
[5:09 PM] Kirk : To me, it's a cool that I can look at html tags, and know they're html tags, not a big grab bag of custom attributes and new tag types
  I similarly wasn't font of JSTL in Java's JSP, which was a whole "build your own tags rather than sticking code bits in your HTML
  See, the thing is there are 2 languages: you have to know how to write tags, you have to know how to write code
  but there's a philosophy that says it's terrible to mix the two
  in JSP, that was ducking out into code snippets:
  <%= for(int i =0; i < rowCounts; i++){  %>
  and in Jquery, that's when you build HTML in your code
  jqueryELement.append("<td>"+Some stuff+"</td>");
  so I admit these are pretty ugly examples
  but they drive some engineers NUTS
  but I don't like their solution, which is : LETS ADD A *THIRD* LANGUAGE
  generally in the form of super-jacked-up tags
  me, I'm not very smart, so I prefer to do fancy thing with a limited number of simple tools than remember a new pile of smart tools
  so I just don't dig it very much
  it took me a while to put my finger on another philosophical difference with the "angular" (and similar libraries) crowed
  and that is this:
  coders tend to think more in verbs, or more in nouns
  the assumption that the latter is the best idea is why Object Oriented got so popular
[5:14 PM] Patrick : right
[5:14 PM] Kirk : but to me, it's the wrong point of emphasis
  "Programs, like People, should be judged by what they 'do' not by what you think they 'are'"
  So so many of these toolkts turn into "coding by configuration" -- you set up your objects to be the right thing, and then they DO the thing, and you're "saved" from writing that code
  but because you never have time to master the damn toolkits, you do it a little wrong
  and then god help you
  because that stack trace is likely to make VERY LITTLE SENSE
  it won't be a simple list of "I tried to do this, then this, then this", a nested stack trace like w/ Imperative Programming
  there's a big risk it's going to be a very tough to follow and debug set of abstract functions and what not
  I really think systems should be easier to model in your head.
  But I finally figured out why I dislike the Angular mindset:
  I mean in some ways, sure, the idea of the shared memory so controlling the DOM is powerful
  but the Angular coder thinks of the DOM and the code as one thing
  it's not a clean separation of (what to me is) the model vs the controller
  it's just a big tighty coupled stew, with the DOM trying to reflect the current memory state
  the programming I was more comfortable in, Bad Old jQuery, treats the DOM more like a billboard
  You write to it at certain times, you read from it at other times
  it stays pretty predictable in between those times, modulo animations and whatever the user is doing
  The DOM and my code are very loosely coupled, i.e. very carefully controlled and known access/info exhange points points
  Usually this type of loose coupling is considered a good thing :)
  but not here, in generl
  I haven't looked into it but I think Backbone.js might be more to my liking, providing certain tools you can take or leave, and while it imposes a certain set of assumptions on the data going back and forth from the server and what your REST URLs look like, it's value proposition is clear.
  Basically I evaluate every toolset on "does it have a good power/weight ratio", does the things it makes "easy" outweight the complexity of things you have to learn to use it well
  for me, so far, Angular fails that, rather hard.
  It does some cool stuff with modules, and testability, but not much that couldn't be done by a self-aware coder using simpler tools
[5:22 PM] Patrick : yeah, i can definitely see that
[5:23 PM] Kirk : One of the things that let me realize my philosophical "issue" with Angular, and anything that so tightly maps a bit of memory w/ the DOM, is thinking about animations
  man, I love making fun bouncy animations in JQuery
  and in angular, you can kind of do it, but it's awkward
  Thinking about why was instructional: it's because my style of jQuery is much more event driven. Something happens, my code tells the DOM to show something, and it's the most natural thing in the world to do it as a smooth transition rather than just "show this now"
  but angular, it's designed around quick, herky-jerky "change the screen so it looks like the memory! right now!"
  To me that's a boring life-- but I was spoiled learning HTML5/CSS/JQuery on a site for teens, where there was a stronger than usual excuse to make the page exciting and bouncy ("Juicy")
  Alright, thanks for listening
  I'm not saying I'm 100% right about everything
  and angular is a kick ass thing to have on a resume right now
[5:28 PM] Patrick : hahah yeah, there's that at the very least
[5:28 PM] Kirk : and I want to get more adept at it, get past its syntax weirdness (though man, supposedly angular 2 is not even going to try to be backwards compatible. which makes me SMH at the love for it)
[5:28 PM] Patrick : oh ugh that's not great
[5:29 PM] Kirk : I think the best tools do one or two small things well, and don't demand you structure your whole code base around it
[5:29 PM] Patrick : but yeah, i think it's good for me to kind of get a more expansive frame of reference
  after doing that with some functional languages in school and with JS here, it's really nice
[5:32 PM] Kirk : when I started jQuery / CSS for reals in 2010, the idea of making a simple image scroller (i.e. show an image with a next/prev arrow then scroll smoothly to the next one) seemed like black magic
  now that I know the CSS behind it, and the jQuery to power it, I could do it in my sleep
  (it's a good simple exercise in CSS, overflow:hidden , nested divs, positioning the innder DIV so that only the current imge part is sticking through the overflow:hidden frame wrapped around it all)
  A certain type of engineer hear really dislike UI, but for me, I love making things I can show off and also so easily peruse the guts of

No comments:

Post a Comment