Monday, November 20, 2017

Change Log: 2.52.1049

Release 2.53.1049 devotes a lot of effort to paying down technical debt and optimizing for performance.

Last December, I wrote about working on improving page render times by optimizing the legacy webapp architecture for speed. Later, in January of this year, when I put out the Anniversary Release of the Manager, I set out my three-part plan for improving the Manager in 2017:

  1. Pay more attention to presentation and aesthetics.
  2. Require fewer page reloads/refreshes.
  3. Implement more and better multiplayer support.

To me, the goal of having fewer page reloads/refreshes was the first step towards the larger goal of improving the UX of the site overall.

The second step, as I wrote about in another performance-related post back in January, was to embrace the RAIL philosophy, leverage Google's optimization tools and, ultimately, get views to render in a way that felt more responsive.

And so, for all of those reasons, when I was working on 2.53.1049, I spent a lot of time researching performance optimization techniques for AngularJS apps (and JS in general) and this release chips away at the time penalty incurred during the up-front/page load.

Release 2.53.1049 improves performance on all views, but the "Create New Settlement" view has been totally hot-rodded out and goes really fast now; it literally renders in half the time that it used to and, under optimal network conditions, will always be fully rendered in under a second.

I don't think other views will ever get to this level of performance (mostly on account of how much data they need to retrieve from the API), but I had to start somewhere, and the performance on this view is a major improvement.

At any rate, the optimization work is obviously far from finished, but I think I have made a lot of progress since the Anniversary Release on the performance front.

Thanks for using the Manager!

Corrections and Fixes

  1. Fixed an inheritance bug where the models.innovations.py file had its Assets() method inheriting the new style object class, when that should have been inherited by AssetCollection (over in Models.py). All AssetCollection() objects are now subclasses of object.
  2. Addressed an issue where the sidenav/burger looked broken during settlement retrieval: replaced everything with a loading lantern.
  3. Addressed an issue where the "Welcome" modal would be visible for a second or two during long dashboard loads.
  4. Removed some print debugging in login.js that displayed user login information in the console. Not really a problem, but bad for appearances, etc.
  5. Removed some vestigial code in the legacy webapp that tried to create a new settlement if a user tried to initialize a settlement without an OID.
  6. Removed a redundant settlement initialization from the legacy webapp's session.Session.render_user_asset_sheet() method. Should save us a little time on the render of Settlement and Survivor sheets. 
  7. Fixed a scoping issue that made Campaign Summary 'Survivor Search' perform weirdly.
  8. Bogus storage location "Oxidation" no longer shows up in Settlement Storage controls.
  9. Addressed an issue on the Settlement Sheet storage controls where duplicate gear rules could throw a (harmless) JS error in the console.
  10. Addressed an issue where timeline events POSTed by the legacy webapp could show up with blank/null/undef names (i.e. as blank lines) on the timeline. -ER
  11. Addressed a CSS/presentation issue where certain types of event log entries, if they fell on a zebra row, could appear 'blank' (because their text color was white).
  12. Fixed a bug in the API assets.gear.py file where the 'Dried Acanthus' description was a list (this broke...all types of shit in spectacular fashion).
  13. Addressed an issue where creating multiple survivors attempted to call the (deprecated) modify() method of the Settlement object.
  14. Fixed the expansion asset for Gorm so that the 'Gorm Climate' event is added with its handle as well as its name. -RS
  15. Addressed an issue where events without handles could prevent the settlement Campaign Summary from loading-RS
  16. Fixed a scope issue on the Dashboard that prevent the 'About' panel from displaying the webapp's release version correctly.
  17. Fixed a bug where the 'Noble' and 'Reincarnated' surname special attributes did not light up their boxes in The Constellations.

Application Enhancements

  1. Legacy webapp no longer renders HTML for admin sidenav buttons (multiple survivor creation and expansion management): that's handled by AngularJS now.
  2. The style.css class .modal is no longer 'display: none'.
  3. Refactored a number of modal elements to use the showHide() method, to cut down on the non-AngularJS Javascript we execute on a page render.
  4. Deprecated the initializeModal() method.
  5. Replaced the performance calls in kdmManager.js with console.time()/console.timeEnd() calls for better benchmarking.
  6. The sidenav has been refactored to no longer use legacy webapp HTML elements: everything is done in AngularJS now.
  7. Cleaned up the "Report an Issue" text and presentation at all breakpoints. Clicking the button now hides the window and shows the full page loader, like most other submit buttons.
  8. Refactored and optimized the Create New Settlement view for speed (gotta start somewhere):
    1. The Create New Settlement view now initializes the user and does some things with it.
    2. Refactored the burger/sidenav code for the Create New Settlement view so that it's pure AngularJS (no app-side rendering).
    3. Addressed an issue where the (beta) Hunt Phase HTML was rendered (accidentally) while creating the Create New Settlement view.
  9. Cleaned up the showHide() method's error to print its name/params.
  10. Moved the HTML for the beta 'Hunt Phase' app to the html.angularjs class methods; the app also no longer is a string.Template object (i.e. it's just a string now) so we don't take an all-views time hit there anymore.
  11. Removed 'update_mins' kwarg functionality from the legacy webapp's Settlement initialization workflow.
  12. Deprecated the registerModalDiv() method from kdmManager.js methods in the rootController. Removed the code as well, because it was a piglet with scope problems.
  13. Campaign Summary 'Survivor Search' loads after the settlement now (should help with performance); clicking on a survivor in survivor search results now closes the controls and shows the full page loader. Clicking off of the results closes the results as well.
  14. Added AngularJS's built-in $log functionality to the rootController controller.
  15. Moved the Google Analytics block to the bottom of the 'head' element, as per their docs.
  16. Deprecated/removed the legacy webapp's Settlement class modify() method. Also replaced the session.py call to it with a line that logs it as an error.
  17. Cleaned up the presentation of the modal controller for adding multiple survivors.
  18. Cleaned up the presentation of the modal controller for modifying permanent survivor affinities.
  19. Removed a redundant legacy webapp settlement initialization from session.py from the block where we switch to the Campaign View. Should help speed a teensy bit.
  20. Cleaned up the 'About' panel of the Dashboard and updated the blog with Survival +5 credits.
  21. Survivor Sheet survivor name input is an editable div now, and doesn't break the display on shining long dingle survivor names of the fool.

API Development

  1. Keyed in crafting recipes for Bone Smith gear
  2. Added /gear route, which allows for standard asset lookups
  3. Refactored request_broker.get_game_asset() for DRYness, extensibility and speed:
    1. Lookup routes now support GET requests (which just dump everything)
    2. Replaced the if/then try/except stuff in the method with a dictionary lookup
    3. Moved the request processing out of the function and into Models.GameAsset.request_response()
    4. Cleaned up the Models.GameAsset.request_response() method to a.) initialize request params and b.) bail as early on the response (e.g. if we're doing a GET or we have no lookup params, etc.).
    5. Removed private, in-method exception handling (errors percolate up to the main error handler and send a panic email now).
  4. Reorganized api.py so it's a little more readable for newcomers.
  5. Overwrote the models.monsters.Assets.get_asset_from_name() method to call the base class method (i.e. the Models.AssetCollection.get_asset_from_name() method) and return results unless kwarg 'decompose' is set to True (which it is by default), in which case it will decompose the incoming name string and try to guess.
  6. Created helper method utils.decompose_name_string() to help iterate through asset name strings when guessing.
  7. All AssetCollection children now have access to their parent methods (via super).
  8. Creating a new settlement with pre-fab survivors who come from an expansion automatically adds that expansion to the settlement's list of expansion content.
  9. Enhanced the /settlement/get_event_log/<oid> route to accept POST params 'lines' and 'get_lines_after'. Updated the documentation for the route to show how to use them. -Caleb
  10. Updated Models.UserAsset.log_event() to include a.) the creator (if there is a request) and b.) the survivor, if there is a survivor.
  11. Keyed in the "Lantern Research" and "Oxidation" Story Event info.
  12. Updated core Story Event page numbers to 1.5.

7 comments:

  1. Hi. Just discovered your kdm-manager today. Seems like you had a big update yesterday. It might be related that I have some angular errors on the main page... https://imgur.com/a/qJlmr
    I have Chrome Version 57 on Ubuntu

    ReplyDelete
    Replies
    1. Hey--thanks for writing in!

      I actually have a ticket open for that issue: https://github.com/toconnell/kdm-manager/issues/393

      Evidently it has been affecting some users for a while now, but I am still not sure what causes it.

      Do you know if you are running any script-blocking extensions or anything that might modify/obstruct a site's javascript?

      Delete
    2. I already tried to disable adblock and Grammarly. I never had any issues with other extensions...
      Here you can take a look https://imgur.com/a/Hu0xw there is unneeded coma in the Promise.then call. I'm not sure if this could be the reason of the error. But I can't test the page since my chrome tools treats this file as broken and I can't debug it.

      Delete
    3. Ah! Nice catch! I'll get that in the next release and update the ticket.

      The comma is definitely unnecessary and I could see how it could throw some less...forgiving JS interpreters.

      Delete
    4. Alright, I just pushed a small release that removes the unnecessary comma. The ticket is still open, pending additional feedback, but if you get a chance to check it out, let me know if you still get the error.

      Thanks again!

      Delete
    5. Yea! It works for me now! Great thing you did there! I will use it for my first KDM campaign. As a developer I know that this tool was not simple to create. Great job!

      Delete
    6. Excellent!

      Let me know if you run into any other issues or have any questions/ideas.

      Thanks again for taking the time to work on this with me!

      Delete