text: (window.webpackJsonp=window.webpackJsonp||[]).push([[4],{32:function(e,t,s){},34:function(e,t,s){"use strict";s.r(t);var i=s(0),a=s(11);s(32);function n(e){var t,s;return{c(){(t=Object(i.o)("section")).innerHTML='<h2 class="svelte-1lnv2q1">Overview</h2> <div class="svelte-1lnv2q1">The provided Docker service was interpreted as a 3rd-party API. We wrote our own consolidating API to service our UI application.</div> <div class="svelte-1lnv2q1">Features implemented include:</div> <div class="svelte-1lnv2q1">• Query properties by <b>Lat/Lng</b> and see results in a table; <b>Serach radius</b> is arbitrarily limited to 256,000 meters.</div> <div class="svelte-1lnv2q1">• Inspect "details" of a property represented as a row in the query results table</div> <div class="svelte-1lnv2q1">• Query properties by entering a <b>place name</b> onto a map surface (City names work really well here.)</div> <div class="svelte-1lnv2q1">• Review property details by clicking a marker dropped on the map surface representing the property</div> <h2 class="svelte-1lnv2q1">Stack</h2> <div class="svelte-1lnv2q1">• <b>API</b>: the API layer was written in <b>TypeScript</b> and runs as a conventional <b>Express/NodeJS</b> application; it is not secured and assumes the Docker service\n\t\t\t        to be fixed in regard to <i>host</i> and <i>port</i> as specified in the Docker configuration.\n\t\t\t    </div> <div class="svelte-1lnv2q1">• <b>Image processing</b>: the API layer makes use of a Node package named <b>Sharp</b> which ships with its own binaries; thus, platform differences might cause havoc. It is \n\t\t\t        generally well-behaved on MacOS and Ubuntu. I didn\'t test it on Windows.\n\t\t\t    </div> <div class="svelte-1lnv2q1">• <b>UI</b>: the application UI was written in <b>JavaScript</b> using the <b>Svelte</b> library. It, too, does not employ authentication and assumes the NodeJS API is fixed\n\t\t\t    in regard to <i>host</i> (<span class="code svelte-1lnv2q1">localhost</span>) and <i>port</i> (<span class="code svelte-1lnv2q1">3000</span>). It has no knowledge of the Docker service, but (sigh) a lot\n\t\t\t    of knowledge of the Google Maps API.</div> <div class="svelte-1lnv2q1">• <b>UI State</b>: application state is handled with the <b>XStateJS</b> library which implements in JS the W3C\'s <i>State Chart XML (SCXML): State Machine Notation for Control \n\t\t\t        Abstraction</i> standard. Note that it is the sole client-side production dependency.</div> <h2 class="svelte-1lnv2q1">Issues and Observations</h2> <div class="svelte-1lnv2q1">There are several issues that remain unaddressed:</div> <div class="svelte-1lnv2q1">• As mentioned above, the application and API are unsecured.</div> <div class="svelte-1lnv2q1">• Little effort was put toward performance, latency, and responsiveness under load.</div> <div class="svelte-1lnv2q1">• Testing was very limited, no unit tests were written, and only a cursory usability check  was done with "latest" Chrome and Firefox on MacOS.</div> <div class="svelte-1lnv2q1">• CSS <span class="code svelte-1lnv2q1">flex-box</span> was used a lot so browsers that don\'t support it will be problematic.</div> <div class="svelte-1lnv2q1">• The UI hints at responsiveness but will break on viewports smaller than about 1376px width.</div> <div class="svelte-1lnv2q1">• There is no client side routing.</div> <div class="svelte-1lnv2q1">• Some UI state conditions involving the drawer (side panel) are not handled very well.</div> <div class="svelte-1lnv2q1">• Data input elements are not validated client side, and the UI doesn\'t handle the API-side validation very well.</div> <div class="svelte-1lnv2q1">• There is a complicated bug in regard to map search, markers and zooming. This is as much a "policy" or "behavior" bug than code. We punted.</div> <div class="svelte-1lnv2q1">• There is fairly <span class="bad svelte-1lnv2q1">bad bug</span> in the consolidating API wherein it will sometimes fail to return a useful response to the UI. The error is in the API\'s handling of certain \n\t\t\t        conditions of response from the 3rd-party service, and there wasn\'t time to fully track it down. It seems most noticeable in lack of images on first-time queries. \n\t\t\t        <u>The workaround is to try the query again.</u></div>',Object(i.e)(t,"class","svelte-1lnv2q1")},m(e,s){Object(i.v)(e,t,s)},p:i.z,i(e){s||Object(i.b)(()=>{(s=Object(i.k)(t,a.a,{})).start()})},o:i.z,d(e){e&&Object(i.n)(t)}}}class l extends i.a{constructor(e){super(),Object(i.u)(this,e,null,n,i.E,[])}}t.default=l}}]);