{"id":2800,"date":"2014-09-07T03:26:52","date_gmt":"2014-09-07T03:26:52","guid":{"rendered":"http:\/\/13.52.125.237\/?p=2800"},"modified":"2014-09-08T16:56:25","modified_gmt":"2014-09-08T16:56:25","slug":"reign-of-the-front-end","status":"publish","type":"post","link":"https:\/\/sotaenterprises.com\/?p=2800","title":{"rendered":"Reign of the Front End"},"content":{"rendered":"<p>Since my last post in January 2014, I have thrown myself head-first into the world of JavaScript, Meteor, Node.js and MongoDB, working on two major (i.e., paid) projects plus one unpaid project.<\/p>\n<p>The first paid project is a system to support sales functions of an established firm in the nutritional supplements space.\u00a0 The system is essentially an add-on to an existing CRM system. It uses the APIs to discover incomplete orders in the CRM system, then issues reminder emails to the prospects, and provides a convenient single-click method of completing those orders.<\/p>\n<p>The second paid project is a multitenant SaaS in the eLearning space.\u00a0 The goal is to create a minimum viable product (MVP) to serve as a beta, and potentially to attract seed capital.\u00a0 This eLearning project has consumed most of my attention this year, and the challenges I have encountered are the impetus for this post.<\/p>\n<p>In an earlier post, I suggested that Node.js and Meteor might yield an important indirect benefit: since JavaScript, a single language, is used for both client and server, JavaScript developers need not be pigeon-holed as back-end or front-end developers.\u00a0 Because the Meteor framework reduces friction on the back end, more intellectual horsepower might be freed up for the\u00a0front end.<\/p>\n<p>This could not come a moment too soon.\u00a0 Increasingly, modern websites are dynamic, responsive and reactive.\u00a0 They behave like installed apps.\u00a0 They push the limits of HTML5 and CSS3 leveraging complex stacks of JavaScript code to deliver the best possible user experience.\u00a0 They use\u00a0animations, drag\/drop, collapsible sections, momentum scrolling, popovers, type-ahead boxes, layer sliders, image galleries, maps, video feeds and graphs.\u00a0 Modern systems are expected to work equally well on touch devices and desktops, across all browsers.<\/p>\n<p>We have little choice but to allocate more engineering bandwidth\u00a0to the UI. \u00a0Applications that look like they were designed before the tablet revolution will go the way of the dodo bird.<\/p>\n<h3><strong>Nine Months<\/strong><\/h3>\n<p>In the nine months since my last post, I\u2019ve been immersed in\u00a0the front end.\u00a0 I have come to see myself as a curator, scanning the globe for best-of-breed open-source offerings to facilitate our ambitious UX.\u00a0 Our front-end stack currently includes:<\/p>\n<ul>\n<li>Bootstrap 3-LESS<\/li>\n<li>Bootstrap Context Menus<\/li>\n<li>Bootstrap DateTime Picker<\/li>\n<li>Bootstrap Switches<\/li>\n<li>Bootstrap Tags Input<\/li>\n<li>Jasny Bootstrap Extensions<\/li>\n<li>Holder.js<\/li>\n<li>jQuery Sortable<\/li>\n<li>jQuery Touch Punch<\/li>\n<li>Selectize<\/li>\n<li>Amplify<\/li>\n<li>Touchspin<\/li>\n<li>Nearest<\/li>\n<\/ul>\n<p>Evaluating open-source offerings can be time consuming.\u00a0 Bootstrap and jQuery add-ons tend to be in a constant state of flux as developers struggle to maintain compatibility with other systems, while simultaneously dealing with bugs and feature backlogs.<\/p>\n<p>There are competing offerings, each with strengths and weaknesses.\u00a0 It can be helpful to first research what other developers are saying about the tools, and to take\u00a0into account the sizes of their user bases.<\/p>\n<p>It is necessary to install the tools and use them first-hand to prove that they will work harmoniously with the rest of the stack.\u00a0 You need to dive into the JavaScript code, frequently single-stepping through it with a debugger to diagnose issues.\u00a0 This process can disqualify a tool, resulting in a new round of searching and evaluation.<\/p>\n<p>Be forewarned that choosing any tool will entail compromises: some features may work great but at the expense of others.\u00a0 You have to pick your poison.<\/p>\n<h3><strong>Meteor Blaze<\/strong><\/h3>\n<p>The Meteor Blaze release has been lauded as <em>the<\/em> solution for reconciling Meteor with jQuery.\u00a0 If you are not aware of the issue, it boils down to this: both Meteor and jQuery-based offerings want to control the document object model (DOM). \u00a0When conflicts occur, you must intercede.\u00a0 Earlier versions of Meteor had template directives to allow you to declare certain areas of your web page <em>constant<\/em> (i.e., off limits for Meteor\u2019s reactive updates).\u00a0 This would allow you to use tools such as jQuery Sortable, albeit foregoing reactive updates for constant regions.<\/p>\n<p>The Blaze release is widely believed to have reconciled Meteor with many jQuery-based tools, but it is only a first step.\u00a0 The Meteor development team deprecated the <strong>constant<\/strong> template directive, implying that Blaze has solved the problem completely.\u00a0 I can say\u00a0with considerable\u00a0authority that this is not true.\u00a0 I have spent hours reconciling the behaviors of tools such as jQuery Sortable and Jasny Bootstrap with Blaze.\u00a0 I have reported issues to the Meteor development team and they have graciously acknowledged them.<\/p>\n<p>Notwithstanding, Blaze is an enormous improvement. \u00a0But there is still work to do to make it truly seamless, and until then UI developers will face extra effort, in some cases patching jQuery tools to get them to work correctly with Meteor.<\/p>\n<h3><strong>Touch-Friendly<\/strong><\/h3>\n<p>Desktop computers and touch devices have different event models. \u00a0 jQuery Touch Punch provides a means to convert touch events into traditional events so the\u00a0same code can work on desktop and touch devices. \u00a0But even when using Touch Punch, you have to be careful about the set of gestures your application supports.\u00a0 For example, there is no obvious gesture corresponding to right-mouse-click on a touch device, even though right-mouse-click is the standard event to display context menu or properties on desktop apps.\u00a0 This means that a modern web application will tend to avoid context menus, or at minimum provide a touchable icon (i.e., button) to display the menu, for example, a down-chevron, which seems to be all the rage these days:<\/p>\n<p><a href=\"http:\/\/sotaenterprises.com\/wp-content\/uploads\/2014\/09\/menua.png\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-2801\" src=\"http:\/\/sotaenterprises.com\/wp-content\/uploads\/2014\/09\/menua.png\" alt=\"menua\" width=\"459\" height=\"145\" srcset=\"https:\/\/sotaenterprises.com\/wp-content\/uploads\/2014\/09\/menua.png 459w, https:\/\/sotaenterprises.com\/wp-content\/uploads\/2014\/09\/menua-300x94.png 300w, https:\/\/sotaenterprises.com\/wp-content\/uploads\/2014\/09\/menua-450x142.png 450w\" sizes=\"(max-width: 459px) 100vw, 459px\" \/><\/a><\/p>\n<p>The down-chevron should not always be visible, but should appear only when the division that contains the menu is \u201chovered\u201d over or touched.\u00a0 I refer to this as a <em>hover control<\/em>.\u00a0 This clutter-resisting design pattern has been made popular by Facebook.<\/p>\n<p><a href=\"http:\/\/sotaenterprises.com\/wp-content\/uploads\/2014\/09\/menub2.png\"><img loading=\"lazy\" class=\"aligncenter wp-image-2814 size-full\" src=\"http:\/\/sotaenterprises.com\/wp-content\/uploads\/2014\/09\/menub2.png\" alt=\"\" width=\"483\" height=\"142\" srcset=\"https:\/\/sotaenterprises.com\/wp-content\/uploads\/2014\/09\/menub2.png 483w, https:\/\/sotaenterprises.com\/wp-content\/uploads\/2014\/09\/menub2-300x88.png 300w, https:\/\/sotaenterprises.com\/wp-content\/uploads\/2014\/09\/menub2-450x132.png 450w\" sizes=\"(max-width: 483px) 100vw, 483px\" \/><\/a><\/p>\n<p>There is no touch equivalent for double-clicking, so that gesture should be avoided entirely.<\/p>\n<p>Other differences include the absence of movable dividers (sashes) in the touch world, and the fact that drag\/drop gestures must be reconciled with scrolling: in the touch world the two gestures can be ambiguous unless explicit \u201chandles\u201d are designated for dragging.<\/p>\n<h3><strong>Layout Challenges<\/strong><\/h3>\n<p>A modern web site must work well on desktop and touch devices, and with all popular browsers at any screen resolution.\u00a0 Bootstrap is helpful for coping with differences in screen sizes, but it is no panacea.\u00a0 Media queries can help in limited cases by targeting CSS rules to particular devices, but complexity grows with each exception added; therefore, it is necessary to code your HTML and CSS carefully and test frequently to avoid changes that break the UI on one or more platforms.<\/p>\n<p>Speaking with other UI developers, I\u2019ve come to realize that we\u2019re all in the same boat.\u00a0 We\u2019re all looking at our iPads wondering why our text doesn&#8217;t properly center on certain devices, or why our scrolling area extends beyond the right margin of the containing division, or why when iOS momentum scrolling is enabled we cannot drag items out of the containing division without the item being rendered invisible.\u00a0 With each new problem, we will use Google to find hits that might give us more insight, or might yield a solution.\u00a0 Time and time again, we will eventually find the magic recipe of CSS and\/or JavaScript to overcome the problem.<\/p>\n<p>Consider this: the popular website JSFiddle is loaded with tens of thousands of hacks to beat the browser into submission.\u00a0 \u00a0That such a web site is even necessary speaks volumes about the current frustrating state of affairs.<\/p>\n<p>Occasionally, when I complain about this, some hot-shot UI developer will respond \u201cwe use LESS\u201d as if LESS somehow ameliorates these issues.\u00a0 The implication is that the problems are attributable to the CSS language; unfortunately, the problem isn\u2019t the syntax of CSS, it is how browsers interpret the rules, particularly in complex cases with heavily nested divisions and dealing with issues like dynamic resizing, justification, visibility, scrolling and truncation.<\/p>\n<p>We use LESS for all of our projects, specifically the <em>advanced<\/em> configuration offered by package Bootstrap-LESS.\u00a0 But LESS doesn&#8217;t address the core issue: the difficulty of finding the magic set of rules that will yield the desired dynamic-resize behaviors.\u00a0 Your pages must behave beautifully on any desktop or mobile device, at any size.<\/p>\n<p>CSS requires discipline and continuous refactoring.\u00a0 The never-ending battle to keep your CSS DRY (don\u2019t repeat yourself) is thankless.\u00a0 Unless you pay\u00a0careful\u00a0attention to class naming conventions and rule granularity, your CSS can spin out of control. \u00a0Seemingly innocent changes will begin to have unwelcome side-effects.<\/p>\n<p>Lately, I\u2019ve been adding detailed comments to my CSS.\u00a0 Whenever I code a complex set of rules to overcome some layout issue, I write comments as clearly as possible to explain the intent of those rules, particularly in cases where the intent is to circumvent a browser bug.\u00a0 When the CSS has to be changed, comments regarding the original\u00a0intent can help minimize costs.<\/p>\n<h3><strong>The Front End Remains the Same<\/strong><\/h3>\n<p>Last year, I went on a quest to find the best full-stack framework to develop modern web applications.\u00a0 I evaluated Ruby on Rails, Grails, ASP.NET and Meteor\/Node.js.\u00a0 I imagined that I would find\u00a0the best framework, try to learn it inside-out, and then use it to develop exciting applications.<\/p>\n<p>But there was one thing that I didn&#8217;t fully appreciate: regardless of which framework you choose, the front-end issues will always be there.\u00a0 JavaScript, HTML5, CSS3 and all of the related challenges will be virtually identical.\u00a0 You\u2019re going to have to worry about responsive design, layout, advanced behaviors touch devices and browser compatibility.<\/p>\n<p>If you are a full-stack developer,\u00a0you&#8217;ll spend the\u00a0majority of your time in the front-end world of JavaScript and jQuery, regardless of whether your back end may be PHP, Django, Rails, JSP, ASP.NET or Node.js.<\/p>\n<p>In my view, this reinforces the notion that Node.js (and particularly Meteor) is a great choice for new systems. \u00a0Since there is no viable way to avoid JavaScript on the front end, why not go all the way and use it for everything?<\/p>\n<h3><strong>When Will Our MVP Be Ready?<\/strong><\/h3>\n<p>Notwithstanding great tools, project durations can be difficult to estimate, because no one can anticipate the snags that will arise. \u00a0One thing <em>is<\/em> predictable: a given project will take longer than one would wish. A modern web site that works beautifully on all devices and has cutting-edge behaviors will be expensive.<\/p>\n<p>Today, one factor seems\u00a0irreducible: the cost of research.\u00a0 When you embark on creating a new subsystem that requires advanced behaviors, you\u2019ll be forced into research mode to evaluate open-source offerings or custom coding.\u00a0 When you run into a snag, such as unacceptable behavior on some device, you will have choices (1) ignore the issue (2) consult with a knowledgeable colleague (3) fight harder by Googling, looking at the source code and experimenting.<\/p>\n<p>In research mode, it is difficult to estimate how long it might take to find a solution.\u00a0 To estimate the cost, you must rely on your instincts, comparing each new challenge to similar challenges in the past.\u00a0 Sometimes you get lucky, but more often you don\u2019t.<\/p>\n<p>There will be plenty of dead ends, because no one can make the right choices every single time. \u00a0New JavaScript offerings, platforms and services are constantly being introduced, and competitive pressures will compel you to learn about them and incorporate them into your applications.<\/p>\n<p>Today, it may be drag and drop.\u00a0 Tomorrow it may be streaming video.\u00a0 The next day you may be working with 3D graphics in WebGL.\u00a0 You\u2019ll have to learn many APIs, and use them defensively with robust error control and graceful degradation.\u00a0 Your system is not an island but an amalgamation of services, each of which is another potential point of failure.<\/p>\n<p>We are all constantly learning. \u00a0What we don\u2019t know today, we will learn tomorrow.\u00a0 We must look at new challenges with a sense of wonder, with the eyes of a child.\u00a0 We must take the time to help and support one another, to share what we have learned.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Since my last post in January 2014, I have thrown myself head-first into the world of JavaScript, Meteor, Node.js and MongoDB, working on two major (i.e., paid) projects plus one unpaid project. The first paid project is a system to support sales functions of an established firm in the nutritional supplements space.\u00a0 The system is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[1],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/sotaenterprises.com\/index.php?rest_route=\/wp\/v2\/posts\/2800"}],"collection":[{"href":"https:\/\/sotaenterprises.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sotaenterprises.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sotaenterprises.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sotaenterprises.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2800"}],"version-history":[{"count":16,"href":"https:\/\/sotaenterprises.com\/index.php?rest_route=\/wp\/v2\/posts\/2800\/revisions"}],"predecessor-version":[{"id":3205,"href":"https:\/\/sotaenterprises.com\/index.php?rest_route=\/wp\/v2\/posts\/2800\/revisions\/3205"}],"wp:attachment":[{"href":"https:\/\/sotaenterprises.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2800"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sotaenterprises.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2800"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sotaenterprises.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}