[Koha-devel] Proposal for ES6 development on the staff client

[Jesse]

As part of my work on bug 15522 <https://bugs.koha-community.
org/bugzilla3/show_bug.cgi?id=15522>, I've been working with Preact (a
React clone with a friendlier license). We've established that this needs
ES6[1] in previous discussions on the mailing list and in IRC. From there,
we found IE's many limitations meant we needed a transpiler[2] to to make
use of these features.

Owen and I have been thinking about the easiest way to do this, and this is
the lowest-friction process we've come up with to transpile ES6:

$ sudo apt-get install nodejs npm
$ sudo npm install -g yarn
$ yarn install
$ yarn build

Yarn is a somewhat faster version of npm, the de-facto JavaScript package
manager. Normally, this would be a pointless addition, but the npm in the
Debian repositories is 3 major versions out of date, and therefore not a
great option. Many npm packages simply fail to install.

This is a constant problem with the JS packages in the Debian repos; most
if not all of the tools that one might want either are completely
unpackaged or woefully out of date. Packaging them ourselves means working
our way through a number of dependencies (see [3] for an example). Any
frontend build process worth our time cannot solely use packages from the
upstream repos.

That aside, this build process will use Gulp, Browserify and Babel to take
any files in koha-tmpl/intranet-tmpl/prog/js/src, and compile them into a
matching file in koha-tmpl/intranet-tmpl/prog/js/built . This means that
any new files will not have to be manually whitelisted.

You can see a working example at https://github.com/pianohacker/koha,
branch bz15522. I'm currently committing the built versions of the files,
but this is purely for convenience of prototyping. The page in question is
admin/policy.pl, and the relevant code is at
.../prog/js/src/admin/policy.js .

[1] ECMAScript 6, a semi-recent version of JavaScript with a large number
of new features, including a nice class syntax, arrow functions, and
destructuring assignment.
[2] A tool that transforms ES6 syntax (and the JSX syntax extension used by
(P)react) into something that can be run by older browsers, including IE.
[3] https://wiki.debian.org/Javascript/Nodejs/Tasks/gulp


-- 
Jesse Weaver
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.koha-community.org/pipermail/koha-devel/attachments/20170829/5437c9a9/attachment.html>