#341: TC39, ECMAScript, and the Future of JavaScript

This week’s JavaScript news — Read this e-mail on the Web

JavaScript Weekly

Issue 341 — June 30, 2017

TC39, ECMAScript, and the Future of JavaScript
A thorough explanation of how new features make it into JavaScript, before focusing on some practical examples including Array#includes, named captures, and lookbehind assertions in regexes.

Nicolás Bevacqua

Automated Testing with Headless Chrome
Eric Bidelman runs through how to use Headless Chrome, using Karma as a runner and Mocha+Chai for authoring tests.

Google Developers

Optimizing AWS Lambda performance with MongoDB Atlas and Node.js
See the performance implications of using Lambda functions with a database-as-a-service like MongoDB Atlas.

MONGODB
  Sponsor

ECMAScript 2017 Language Spec Published
The official spec for ES2017 (essentially the 8th edition of the JS spec) has been published in HTML and PDF if you’re lacking for bedtime reading.

ECMA

React Armory: A Neat Way to Learn React Online
A well presented tutorial site complete with rich, live editable examples.

James K Nelson

Vulcan: An Open-Source Project to ‘Meteorize’ GraphQL
A full-stack app framework built on React and GraphQL. It’s an evolution of Telescope but is becoming less Meteor-dependent.

Sacha Greif

TypeScript 2.4 Released
Includes support for cynamic import() expressions, string enums, improved checking and more.

Microsoft

This Week’s React-Specific News

React Status is our React focused weekly. This week it includes a React Native starter kit and an introduction to Redux-first routing.

React Status

Jobs

JavaScript Developer at X-Team (Remote)We seek a developer with extensive JavaScript knowledge. We’re 100% remote and provide the funding needed to help you achieve your goals and grow. X-Team

Front End Engineer at EDITED (London)Join us to impact how the world’s biggest retailers operate by making a web app with great UX and DX using React, Redux and Glamor. EDITED

Can’t find the right job? Want companies to apply to you? Try Hired.com.
In Brief
Babylon, Babel’s JS Parser, To Support TypeScript news Not a lot to see yet, but .ts support has been baked in.Babel
Microsoft’s ‘Sonar’ Linting Tool Joins the JS Foundation news Check out Sonar’s homepage to learn more.Kris Borchers
Use AngularJS to Build a Fast and Secure Chat App PubNub gets your data anywhere in less than 0.25 seconds. It’s so easy with PubNub’s AngularJS library.PubNub  Sponsor
The ‘Best’ Frontend JavaScript Interview Questions tutorial Opinions will vary but if you do well at these, you’re in a strong position.Boris Cherny
Getting Started with Webpack 3 tutorialJoão Augusto
Build A Realtime Chart with Vue.js and Pusher tutorialYomi Eluwande
Unleash The Power of Angular Reactive Forms video Oriented around live coding a form from scratch.Nir Kaufman
Choosing A Frontend Framework in 2017 opinionThis Dot Labs
Why I’m Switching from React to Cycle.js opinionSitePoint
Using Source Maps to Debug Errors Let’s talk JavaScript Source Maps. What are they? How to enable source mapping? Why aren’t they working?ROLLBAR  Sponsor
Decaffeinate: Convert Your CoffeeScript to Modern JavaScript tools A well established project that continues to get frequent updates.Brian Donovan
An Up to Date List of TC39 Proposals and their Status toolsNicolás Bevacqua
Search and Install npm Modules Automatically from the Atom Editor toolsAlgolia
Infinite Scroll v3: As Users Scroll, Automatically Load More tools Note it’s both GPL3 and commercial.Metafizzy
Study: A Progressive, Client/Server AB Testing Library codeDollar Shave Club
echarts: Powerful Charting and Visualization in the Browser code Lots of demos here.Baidu
vanilla-tilt.js: A Dependency-Free, Smooth 3D Element Tilting Library code
RE:DOM: A Tiny (2KB) JS Library for Creating User Interfaces codeJuha Lindstedt
frontexpress: An Express.js-Style JavaScript Router for the Front-End codeCamel Aissani
share-this: Medium-like Text Selection Sharing Without Dependencies codeMassimo Artizzu
ForwardJS Tickets on sale today 
ForwardJS  Sponsor

Curated by Peter Cooper and published by Cooperpress.
Like this? You may also enjoy: FrontEnd Focus : Node Weekly : React Status
Stop getting JavaScript Weekly : Change email address : Read this issue on the Web
© Cooperpress Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK

Link: http://javascriptweekly.com/issues/341

Integrating React Native in an existing application

Updated 11/04/2017: Added some of the API changes and updated the React Native version used in the article

As I promised at the end of my previous article, “Writing an Android component for React Native”, here is the second approach for React Native and native Android code to live together in peace and harmony and not blow apart. Since this is a follow-up to the previous article, I will jump straight into the heart of the matter. If you need a brief introduction on React Native and how it’s organised on the Android side, please visit the aforementioned link.
Getting it to work
After following the docs sample, you copy the snippets, run the commands… Et voilá! Well… Not really. Actually, the docs do not reflect the current state of the API, which is v0.42.3 when I ~wrote~ updated this paragraph. I will try to expose my issues and the ways I worked around them, but YMMV.
A slightly updated version of the activity showing the React Native content would look like this:
public class ReactActivity extends AppCompatActivity
implements DefaultHardwareBackBtnHandler {

private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
private LifecycleState mLifecycleState
= LifecycleState.BEFORE_RESUME;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName(“index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(mLifecycleState)
.build();
mReactRootView.startReactApplication(mReactInstanceManager,
"ReactSample", null);

setContentView(mReactRootView);
}

@Override
protected void onPause() {
super.onPause();

mLifecycleState = LifecycleState.BEFORE_RESUME;

if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause();
}
}

@Override
protected void onResume() {
super.onResume();

mLifecycleState = LifecycleState.RESUMED;

if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}

@Override
protected void onDestroy() {
super.onDestroy();

mReactRootView.unmountReactApplication();
mReactRootView = null;

if (mReactInstanceManager != null) {
mReactInstanceManager.destroy();
}
}

@Override
public void onActivityResult(int requestCode, int resultCode,
Intent data) {
if (mReactInstanceManager != null) {
mReactInstanceManager.onActivityResult(this, requestCode,
resultCode, data);
}
}

@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
}
else {
super.onBackPressed();
}
}

@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
}
The snippets for index.android.js and package.json seem fine for now at least 😎
So, you try to run it but…
Troubleshooting time
These are the problems I found, but as always, YMMV.
java.lang.UnsatisfiedLinkError: could find DSO to load: libreactnativejni.so
Uh Oh! This sounds scary! What happened here? Well, I decided to test it on a Samsung Galaxy S7 (running Marshmallow, that also will be important in a second or two) … Which happens to be a 64 bit phone. And React Native does not provide a 64bit version of its binary. Usually Android would do a fallback, but this does not happen if you have a 64bit dependency in theory, but in practice I found it happening in a blank modern project.

Uh-oh
Solution
To avoid this, we will have to use some deprecated API in the Gradle plugin in order to tell it to build exclusively for non-64-bit targets.
ndk {
abiFilters "armeabi-v7a", "x86"
}
Did I mention it’s a deprecated API? Android Gradle Plugin will not like it. Just do as the warning says and add android.useDeprecatedNdk=true in your local gradle.properties.

Ugh
Better solution
There is a better (and not deprecated) way of doing this:
packagingOptions {
exclude ‘/lib/mips64/**’
exclude ‘/lib/arm64-v8a/**’
exclude ‘/lib/x86_64/**’
}
This way, you ensure you get rid of the unsupported ABIs, instead of explicitly supporting a few.
So, you hit the “Run” button again and…
BadTokenException: Unable to add window – permission denied for this window type
One very cool thing about developing in React Native is that you get to see the exceptions overlaid on top of your app if you are in debug mode.
One very cool thing about Android Marshmallow is its new permission system, which allows you to take the power back and have a granular control on what you allow your app to do or not.
One very not cool thing about our empty app is that we do not request permission to draw over apps, but React Native will attempt to use it anyway, resulting on this beautiful stacktrace.

Unexpected exception
Solution
A short snippet like this one, carefully placed in onCreate, will quickly ease your pain and show the app overlay permissions dialog instead of randomly crashing each time your app needs it. You will still have to scroll through the whole list of apps that have that permission and manually enable our lovely React Native by hand, but remember, this is only for debugging. Production apps do not require this permission.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
Intent serviceIntent = new Intent(
Settings.ACTION_MANAGE_OVERLAY_PERMISSION);
startActivity(serviceIntent);
}
}
Module 0 is not a registered callable module
This one was especially frustrating to get, since every piece of advice I could find was pointing at an outdated React Native version. But that could not be! I was using the highly discouraged by lint little + at the end of my Maven coordinates…
compile "com.facebook.react:react-native:+" // From node_modules
So then I tried to change it to match the version I stated in my package.json file, but hey, this is interesting!

Le what?!?
Digging a bit deeper, I found out that the plus coordinates were pulling an outdated artefact from Maven Central. Digging even deeper, I found that my local Maven repo to be wrong.
Solution
Change this
maven {
url "$projectDir/node_modules/react-native/android"
}
To this
maven {
url "$projectRoot/node_modules/react-native/android"
}
Since $projectDir is referencing the app/ subdirectory. D’oh! 🙈
“This must be it” you naively think. But what happens if you try to open the debug menu?
android.content.ActivityNotFoundException
So, if you are debugging in a real device and not bundling the JS file, you can shake the phone in order to access the debug menu and…

Thanks for the heads up, logcat
Seriously? AGH!
Solution
Throw this into your tag, as our friendly exception suggests. Yep, as simple as that.

Result and conclusions
After all these sterling efforts, we finally got an Activity to launch. Phew! What a long way round! It was definitely not a bed of roses, and some issues did not appear to have an obvious fix after a quick Google search – but hey, maybe that’s just me being bad 🙈

Hi! You took a long time to appear!
And this is not the end of the road. You will still have to integrate the React Native toolchain into your build process (there is a nice Gradle plugin to help with that, I believe) which adds complexity and build time.
On the other hand, it’s a fair enough way of experimenting on an already existing application without taking the risks that a complete rewrite brings.
But this was too simple, what about interactions between the two sides? I guess I already have a topic for the next React Native themed article… 🤔
As always, code available in GitHub.
This article was originally published on Guillermo’s blog.
Guillermo Orellana – Android Developer

Link: https://techblog.badoo.com/blog/2017/06/30/integration-react-native-in-an-existing-application/

Refactoring React with Tests

As you work on a React application it’s highly likely that you’ll encounter components that have grown over time. They may have started with just one particular use case in mind, but will have been added to since. This can lead to complex render methods and code that’s hard to follow.
In this video you’ll see how to spot components that need some work doing, how we test these components, and how we use the tests to guide us, splitting one component into two much more straightforward ones.
PS: it’s definitely worth making the video fullscreen or viewing on Youtube so you can see things more clearly.

If you’d like to play with this code, you can find the repository on GitHub, and feel free to raise any questions via GitHub issues on that repository.

Link: http://javascriptplayground.com/blog/2017/06/refactoring-react-tests/

Pravin Halady of NodeSource: Enterprise Ready Node.js [Podcast]

I sat down with Pravin Halady, product manager at NodeSource, to discuss why enterprise developers might need a safer and more secure version of Node.js and npm and what it’s like running a business where your biggest competition is the creator of the product you sell.
Getting Started With NodeSource
After the call, I had a brief experiment with the software to see how well it worked and how easy it was to replace default node and npm with it. I found a couple of small, confusing points. For example, when I clicked ‘get started,’ I ended up going through a billing/trial setup that didn’t make it clear what to do next. So, I had to click back on the main logo to find installation instructions.

Link: https://dzone.com/articles/pravin-halady-of-nodesource-enterprise-ready-nodej?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev