joyn

At Joyn we use AWS infrastructures extensively, so we need a wide range of different tools starting from file storage until the health monitoring of our running services. For Smart TV stack we use S3 to mostly store static files (like scripts, styles and html), CloudFront to keep good response times using the cache, Lambda to recognize the TV platform and serve appropriate bundle (except Samsung Tizen platform where application is packaged), CloudWatch to receive alerts in case we have any issues inside of our lambda function.

As we have to build the application for many different TV platforms we want to split the application logic from the device/platform specific code. Previously we had different repositories and it was very hard to keep the development process when changes were done in multiple repositories, as we had to synchronize code reviews as well as merging and then updating the dependencies of projects. This issues would be even more critical when building the project from scratch what we did at Joyn. Therefor to keep all code in one place, at the same time keeping in separated in different modules we decided to give a try to monorepo. First we tried out lerna which was fine at the beginning, but later along the way we had issues with adding new dependencies which came out of the blue and were not easy to fix. Next round of evolution was yarn workspaces, we are still using it and are pretty happy with dev experience it provides. And one more advantage we got when switched to yarn workspaces that we also switched from npm to yarn what improved the state of the lock file a lot, because with npm package-lock file was updated every time you run npm install, frequent updates of package-lock file were causing very often merge conflicts. So right now we not just having faster dependencies installation time but also no conflicts coming from lock file.

The best bundler on the market which has a lot of documentation and plugins available. Another good reason to go with webpack if you need to have a very granular configuration of your project building process. In our case we needed to be able to build application for different TV platforms, as well as somehow keep running together Typescript and Flow codebase.

Typescript incorporated a lot of features from ES6 with its very useful syntax sugar what can make the code more concise and expressive. Main ES6 features we are currently using are:

• destructuring, spread and rest
• async/await
• arrow functions
• const, let
• classes (but still following more functional approach)
• default values
• string interpolation

We think that it's extremely important that developers learn and become experts in ES6, as it has a lot of new syntax structures which have hidden edge cases and this might sometimes create unexpected bugs in the system. Good example of such bugs can be default values which are not replacing falsy values (what || would do), but it only provides a default when the value is undefined.