I'm getting deja vu again
On Tue, 19 Mar 2019 at 14:31 Isiah Meadows wrote:
> UX workflows aren't all of JS. Classes exist for many more reasons than
> that, and 99% of my classes are for abstracting non-trivial business logic
> and ensuring *those* are easily testable, not directly UI/UX.
>
> -
>
> Isiah Meadows
> cont...@isiahmeadows.com
> www.isiahmeadows.com
>
>
> On Sun, Mar 17, 2019 at 2:35 AM kai zhu wrote:
>
>> *rant warning*
>>
>> -1 because classes generally have little-value in UX-workflow programming.
>>
>> the example class RequestManager (given in this discussion),
>> realistically has little reusability-value -- its no better than employing
>> a throwaway static-function (both are equally likely to get rewritten each
>> time UX-workflow features are added.).
>>
>> for example, a common feature-request is adding visual-progress-bar.
>> there is no "simple" way to extend RequestManager to do this, other than
>> significant-refactoring of the base-class (and risk breaking
>> class-dependencies downstream).
>>
>> some other common UX feature-requests that would likely invalidate
>> "reusability" of your class-based design include:
>>
>> 1. needing to upload a binary-file (social-images, receipt-signatures,
>> screenshots, etc...)
>> 2. needing to upload multiple binary-files in parallel (keeping track of
>> timeouts of each)
>> 3. needing to upload multiple binary-files in parallel (keeping track of
>> timeouts of each),
>> and then download their thumbnail-previews from server to visually
>> confirm uploads were correct
>> 4. needing to make parallel http-requests from 3rd-party sources and
>> "joining" the response-data
>> 5. needing the sign-up-page to additionally pre-validate
>> email / username / mobile-number / credit-card / etc... before
>> form-submission to server
>>
>> many frontend-engineers with experience "extending" products with
>> additional UX-workflow features, know its rarely as simple as modifying
>> some class-methods and be done with it -- it oftentimes require rewriting
>> nearly every-piece-of-code that touches the given workflow needing
>> enhancement.
>>
>> p.s. -- here's a "simple" fully-working UX-example [1] on how to add
>> visual-progress-bar to http-requests. if i had to additionally add some of
>> the other UX-features mentioned above, it would likely entail me completely
>> rewriting the throwaway static-function, rather than waste time trying to
>> extend it.
>>
>> [1] https://jsfiddle.net/kaizhu256/t9ubdenf/
>>
>> ```html
>>
>> /* jslint utility2:true */
>> /* csslint ignore:start */
>> *,
>> *:after,
>> *:before {
>> box-sizing: border-box;
>> }
>> /* csslint ignore:end */
>> body {
>> background: #eee;
>> font-family: Arial, Helvetica, sans-serif;
>> font-size: small;
>> }
>> input {
>> width: 100%;
>> }
>> textarea {
>> font-family: Consolas, Menlo, monospace;
>> font-size: smaller;
>> overflow: auto;
>> width: 100%;
>> }
>>
>>
>>
>>
>> ajax-request
>> {
>> "method": "GET",
>> "url": "https://api.github.com/orgs/octokit/repos;,
>> "headers": {
>> "accept": "application/vnd.github.v3+json"
>> },
>> "data": "hello world!"
>> }
>>
>> submit ajax-request
>>
>> ajax-response
>>
>>
>>
>> /*jslint browser*/
>> (function () {
>> "use strict";
>> var local;
>> local = {};
>> window.local = local;
>>
>> local.ajax = function (opt, onError) {
>> /*
>> * simple, throwaway ajax-function that can be easily rewritten
>> * to accomodate new [async] ux-features
>> */
>> var resHandler;
>> var xhr;
>> opt.headers = opt.headers || {};
>> opt.method = opt.method || "GET";
>> xhr = new XMLHttpRequest();
>> // open url
>> xhr.open(opt.method, opt.url);
>> // set req-headers
>> Object.entries(opt.headers).forEach(function (entry) {
>> xhr.setRequestHeader(entry[0], entry[1]);
>> });
>> // send data
>> xhr.send(opt.data);
>> // init request-handling
>> resHandler = function (evt) {
>> /*
>> * this function will handle ajax-response
>> */
>> switch (evt.type) {
>> case "abort":
>> case "error":
>> // decrement ajaxProgressCounter
>> local.ajaxProgressCounter = Math.max(
>> local.ajaxProgressCounter - 1,
>> 0
>> );
>> onError(new Error(evt.type), xhr);
>> break;
>> case "load":
>> // decrement ajaxProgressCounter
>> local.ajaxProgressCounter = Math.max(
>> local.ajaxProgressCounter - 1,
>> 0
>> );
>> onError(null, xhr);
>> break;
>> }
>> // increment ajax-progress-bar
>>
