CODEWITHSUNDEEP
javascriptgitarchitecture
vsync
vsync

Reputation: 130660

Using feature flags in complex UI changes

To simplify matters, lets say there's a single HTML page with it's CSS and JS file. No server.

Now comes a request to toggle features on/off in this simple web UI.
The problem is, for example, a new feature would mean changing the HTML structure to add a new component, so now the HTML is a little different. Also, the CSS of the page itself needs to change in order to support the new component. also, of course, there is javascript code that needs to be changed to fit with the changes made to the HTML..

Of course, if this component was completely "isolated" and had just it's own CSS, javascript and html template file, it was much much easier, but it does require changes to things around it, to the HTML/CSS/JS of the page it resides in.

How can such a complex process be reduced to a simple "feature toggle"?

Also, to bring the complexity to a new level, this new feature might need changes to some library version used in the project, but that's a whole other level of difficulty when toggling features.. but lets ignore this part on the discussion because I am more interested on the matter mentioned above.

Upvotes: 1

Views: 3134

Answers (2)

vsync
vsync

Reputation: 130660

I came up with the following way:

System is basically made out of:

  1. index.html (basic HTML entry point which everything loads into)
  2. HTML template files
  3. SCSS files
  4. Architecture-related javascript files
  5. javascript controllers (kinda like pages. control page events and which components to use in it)
  6. javascript components (imagine tables, grids, tree menus, breadcrumbs...)

home.html template example:

<div class='col'>
   <component class='line-chart'></component>
   <component class='table'></component>
</div>
<div class='col'>
   <component class='bar-chart'></component>
</div>

Steps I did (Simplified):

Create a way to switch features on/off within the UI:

Create aמ architecture (system/app-related) javascript file which its task is to create a dropdown which from a person could choose which features to toggle, and the result is saved in localstorage.
Append the dropdown to the page.
When a user selects a feature, reload the page and after refresh, read the features from localstorage and save them to the architecture state object, under the property "features", to be used later.


Create a feature: "home-v2"

So, I'm working on the Master branch (like a boss) and I want to create some big changes in some page, and add a few components and move other existing ones around. What I did was:

  1. Copy the SCSS file of the page _home.scss and rename to _feature-home-v2--home.scss (it will be automatically imported via the main.scss using globbing)
  2. Copy the template file of the page home.html and rename to feature-home-v2--home.html
  3. Import the javascript components files which will be used to the page controller javascript file.


Write some if statements

This is the "ugly" part, where I must set what to will be done according to each feature. So, for my new example feature home-v2 I will need to do a few things:

  1. go to the home page javascript controller file and go to the line where I load the HTML template, and check if the app State "features" object for

something like this: 

var templateName = `home`;

if( app.state.features['v2--home'] )
    templateName = `feature-home-v2--` + templateName;
  1. Now that the page is using a different HTML structure, which can look like similar to the default home page but with more components and some are in different order:

feature-home-v2--home.html template example:

<component class='breadcrumbs'></component>
<div class='col'>
   <component class='table'></component>
   <component class='line-chart'></component>
</div>
<div class='col'>
   <component class='pie-chart'></component>
</div>

I can now load the imported controllers to where they reside (before they might have been imported but weren't initialized on the page).

Thoughts on the process:

  1. Hitting ctrl-p in Sublime and starting to type feature- will show only the feature-related files.
  2. Produce larger output from the build process, and doesn't use different GIT branches per-feature.
  3. Features should be merged quickly/discarded so the code won't get messy with many features.
  4. using all the features on a single-branch allows to quickly adding/removing with ease of a custom dropdown with checkbox/radio.
  5. GIT commits must be remembered to be named according to the feature worked on, to maintain GIT order with sensible names.
  6. For more complex changes, other files might be needed to be cloned and renamed, even top-order controllers themselves.

Upvotes: 1

Taztingo
Taztingo

Reputation: 1945

I think the best way to replicate flags is to just create a JSON file with ids that you want hide. Then just have the Javascript FileReader (https://developer.mozilla.org/en-US/docs/Web/API/FileReader) read in, parse the JSON, and hide the mapped ids that are false.

Lets say your toggable feature were the following input boxes:

<input id="input_box"/>
<input id="input_box2"/>

Your text file would contain this:

{
    input_box: false,
    input_box2: true
}

input_box would be hidden, while input_box2 would be shown. This seems like the only way to enable flags, unless you want to put it in the URL.

Upvotes: 0

Related Questions