[WIP] Landmarker.io 3.0 - Move to Typescript (Apple Pencil support)

jabooth commented 8 years ago

This PR lands a huge change to the landmarker codebase - a rewrite into Typescript. There are minor bug fixes too, and one key new feature, support for Apple Pencil.

Developer experience changes

Migration from Babel to Typescript. Note that we still use webpack to bundle, now we just use ts-loader in lieu of babel-loader. Note that this also means extensions go from .js to .ts.
Migrate our Promise polyfil from promise-polyfill to es6-promise (the latter has typings and is more popular)
Bump all our dependencies to the latest versions, fixes where needed, including moving to newer node version for CI.
Remove our eslint rules, and linting from the CI build process. Note that we will add tslint in it's place in time but first we just need to get to 0 tsc errors and make sure everything is typed.
Remove our testing and coverage from the build process. Again, it will be great to re-enable with a typescript equivalent, but right now the focus is on completing the TS port.
Move from the current mix of ES5, ES6, and Backbone class styles in the codebase to ES6 (typescript) classes
Include support for Visual Studio Code. We ship a .vscode directory now with defaults for debugging the app in Chrome and defaults for whitespace saving to ensure consistency. After moving to Typescript VS Code is an excellent editor/IDE for development work on landmarker.io

Note that this superceeds #125. We do also have a branch exploring moving from Backbone to React/Redux for the app landmarker.io@react - this move would perfectly complement that effort as the Viewport is now untangled from Backbone. It would however be a considerable effect to rebase that/convert to typescript, and is considered outside the scope of this PR.

Architecture changes

Viewport refactor The Viewport, the module in the landmarker that actually draws the assets and landmarks and handles all mouse/touch interaction, has been modularised into a set of clean classes with well-defined API's. This was by far the worst spagetti code we had in the project, and now we have a much more solid base to build upon.

The public API exposed from the Viewport is now a simple set of well-defined callbacks, and there is no Backbone code left in the Viewport. As we still use Backbone for the rest of the app (for now), we have a bridging class, BBViewport simply holds onto our App backbone model and wires up the correct callbacks to the Viewport.

We've also made sure the Viewport is a standalone unit that respects where it is placed in the DOM (e.g. it will size itself to it's parent). In effect, the viewport could be it's own NPM module with only simple dependencies (THREE, _). This paves the way for embedding the 'crown jewels' of the landmarker in other applications, e.g. https://github.com/menpo/menpowidgets/issues/16

New features

Apple Pencil support

The newly cleaned up Viewport has seperate handlers for touch and mouse. The touch handler adds support for the Apple Pencil by listing for touches with a force attribute on them -- these currently can only come from an Apple Pencil on an iPad Pro, or on any touch on a 3D Touch capable iPhone (currently 6/6S). What's great is only Pencil touches on iPads have this attribute, so we can disambiguate finger touches (camera manipulation) from pen touches (landmark correction). Downside of this is currently every touch on a 6S/6S Plus is interpreted as a pen touch. Hopefully there will be an official API revealed at WWDC '16, but if not we might have to do some detection to only offer pen support on iPads, or have a setting to flick it on and off.

Todo

[ ] Convert Backbone Views to ES6 classes and type them
[ ] Get to 0 tsc errors
[ ] Ensure Viewport is truly standalone (test intersections etc work if not full screen window), check respects parent div size)
[ ] Check coverage/test code is properly cleaned up
[ ] Simplify Viewport callbacks
[ ] Beta test (beta channel?)
[ ] Add issue for tslint support
[ ] Add issue for re-implementing tests in TS
[ ] Check dependencies of Viewport (_ -> lowdash?)
[ ] Decide what to do about 3D Touch capable devices
[ ] Add note about VS Code development

patricksnape commented 8 years ago

Seems like a nice set of changes that will make it easier to create the landmarker widget!

jabooth commented 8 years ago

It's proving a little more difficult than I'd hoped to Backbone Views with strong typing. Bearing in mind we already have the react versions of the sidebar/toolbar working on the react branch, I'm considering bringing them in on top of this PR. We could use a technique like this: https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html

To bridge the Backbone/React worlds for now.

menpo / landmarker.io