search

IET-OU / our-journey

Our Journey: A student journey representation tool
https://iet-ou.github.io/our-journey/
GNU General Public License v3.0
1 stars 1 forks source link

Onward ... splitting the Javascript ... Browserify? #6

Closed nfreear closed 6 years ago

nfreear commented 6 years ago

Hi @TimCoughlan,

At the moment there is one large JS file ~ 450 lines. I don't know how much more it will grow, but would you consider breaking it into a number of smaller Javascript files?

For example, one for file read-write (I like what you've done there Btw ;)), one to manage the assets/ image file-paths, one to handle browser compatibility ...?

We could potentially then build a single file using a tool like Browserify. (There are other tools, like Webpack ... I'm most familiar with Browserify.)

Benefits of using such a tool:

  1. Easier to read / maintain;
  2. Split larger API into separate parts;
  3. Enforce & manage an API -- just one global window.our_journey with functions on it, not lots of global functions(!)
  4. Use Node require() in the browser to re-use code;
  5. Potential to use third-party code seamlessly;

Dis-advantages from your point-of-view:

If you want to get a feel, I've used Browserify for gaad-widget,

Something to discuss ...?

Nick

timcoughlan commented 6 years ago

Agreed. I've not much experience in doing larger pieces of coding with javascript and it will get unwieldy so good to understand practices for this.

nfreear commented 6 years ago

Hi @TimCoughlan,

Do you want to have a meeting in a week or two to talk through some ideas?

I've sketched out a example of how the Javascript could be split:

index.js              # This JS `require`s all the following (including JSON);
      core.js         # initialiseElements(), updateElements(), getElements(), … moveFwdElement();
      config.js       # var numElements = 30, … ??
      assets.js       # getIcon(), getEmoticon(), var emojiDir, cardDir;
      dimension.js        # var iconWidth, iconHeight … postitTextY, postitTextWidth;
      layout.js       # layoutSvgCards() – based on a single <svg> template ??
      file.js         # saveJourney(), loadJourney();
      share-link.js       # createShareLink(), loadShareLink();
      user-ui.js          # changeBackground(), toggleEditor(), toggleOptions() … ;
      utils.js        # getElementById(), querySelector();
      example/journey-1.json      # Example 1;
      example/journey-2.json      # Example 2;

Ta,

Nick

nfreear commented 6 years ago

See pull request ~ #21.

nfreear commented 6 years ago

Completed around 11-12 July!

N.