jsDay.it 2017 — Verona, Italy, May 10th–11th

The opinionated transcript

About

Site: https://2017.jsday.it/
Tag: #jsday 
Twitter: @jsconfit (don’t mix with @jsconf)

Lanyrd: http://lanyrd.com/2017/jsday/
Joind.in: https://joind.in/event/jsday-2017
You can also find links to some presentations there

❗️Disclaimer

Tons of images following!
Some opinionated content should also be anticipated.

More importantly, jsDay is (mostly) a two-track event, so this overview might miss about 40% of desired material. Well… next time I make a clone.



🔵 DAY 1 — 10th of May

📢 Jose Arguinaga — I am good at Javascript I swear

The talk is about the Fear Of Missing Out — FOMO (official term), impostor syndrome and constant learning — the only way to survive and succeed.
That is something often forgotten

You’ve probably read his great article

Don’t discourage the beginners
Try to do simple things
Give it a try at least

If you challenge yourself with new techs every few years of course you feel like a child — IT IS NORMAL

Conflict of showcasing and constant learning

Tools we choose affect our careers
How to pick a right tool?
Pick a tool based in a problem
When tool is not enough find a new one

5 JS fatigue sins:

1. Judge a person by the use of a tool
2. Blame a tool by their opinions
3. Refactor entirely just to play with new toys
4. Interview for a role with a tool in mind
5. Pick X tool on all projects because you only know this tool

Keep learning and growing!
Destroy biases talking with surroundings

We are humans learning to speak with machines
U r not paid to be right, but to be better

p.s. if you ever get a chance to see the presentation — go ahead, Jose is truly a talented speaker!

📢 Alessandro Nadalin — SPA isomorphic and back to the server out journey with JS

The talk is a story of improving the application from 2015 up to the present days with challenges and achievements highlighted
What Alessandro explains is that lodash or similar libs should be module based; and it is our responsibility to use it wisely

First SPA attempt 2015
Client is not happy
IE got problems, native Android browser is problematic

The B* stack

He claims it stands for “Boring”…

Suggested optimizations in terms of code:

Minimize lodash inflicting, abstraction has it’s cost

Consider different ways of code organization, some times it may be a bit convoluting though; but can improve the speed 10x times

With http2 you no longer need sprites

Consider using Reactlite (25kb) and preact (3kb)

Server rendering is fast, use that!
With SPA seamless transition it is possible

Use modern link attributes
Link preconnect inits connections ASAP
Link preload can help preload fonts and css files

Split assets in terms of JS files

Results:
Size decrease -60%
Bounce rate -14%
+40% session duration
+30% cvr with spikes up to 70%

Looking forward:
GRPC — generates server and client based on api
Web push notifications
Firebase cloud messaging
CSP improvements (Github post-CSP journey)
Navigation transitions by Jake Archibald

📢 Matteo Ronchi — Frontend automation; bring it to the next level

I personally expected another angle on the topic, more practical-wise, but the talk turned out to be inspiring, so it’s not much to bring out here

FE devs asked to fulfil multiple roles that require different skill sets

The problems:
Evolving standards
Evolving stack of tools

The solutions:
Grow internal expertise
Following a curated list of individuals
You will break things most of the time
Reserve minimum time every week to take care of the project

Avoid boilerplates and generators
Understand how they work
Test your own automation
Organize it and decouple
Move to another repo?

github run-it repo

Automation is never finished — automate all the things

Automation is never finished
Dogfood your own work


… meanwhile on the other Track
Sandro Paganotti — Web bluetooth

This was a really cool presentation on the IoT with flying drones and camera controlling — highly recommend

📢 Jessica Jordan — Animate the web with ember.js

Talk includes quiet a piece of history behind present animation capabilities on the web and some examples on implementing it within popular frameworks

What we use animations for:
Elements on the page
Page transitions
Data visualization enhancement (svg)

A (not so short) historical intro:
Frame by frame animations
GIF
Flash
And finally “html5” which is is html5, css3, js libs and APIs etc
Open standards is great in case you’d like to participate
Intro continues…

Demo time with html5 canvas example

Canvas drawing in progress

How can we build this with ember.js?
Practically the same, all we need is to create a base component in a framework of choice and voila!

Canvas pros and cons:
+ performance
+ developer control
- creator experience
- accessibility

Web animations API to save the day!
Support is not very decent but there are polyfills (and ember.js addon)

Keyframe demo time

📢 Luciano Mammino — Building a serverless company with Node React and the serverless framework

Luciano’s presentation describes pros and cons of serverless technology, explains serverless framework features and discloses the workflow at Planet9

❗️Presentation is pretty extensive, lot’s of pictures ahead

Luciano is the co-author of “NodeJS Design Patterns”, creator of fullstackbulletin.com

“Serverless” term is sometimes a bit misleading
It only relates to absence of server concept, not absence of physical units

Price comparison of serverless
It is more like car sharing compared to renting and owning a car
95% of the time cars spend on the parking

Advantages of serverless, cloud providers, serverless and Javascript

Demonstration of lambda function (hello world API) integration on AWS
It is possible, but not very convenient to deploy and test

Why Serverless?

Serverless framework overview (github)

Install serverless cli
Create project
edit handler.js
configure serverless.yml

This solution can be tested locally
Easy deployment
Overall it may be a decent startup solution

How is everything structured at planet 9 energy

Auth 0 (auth zero) scheme

At planet9 they use Jest for mocking

Principal scheme:
Git flow
Lint
Unit testing
Build
Functional testing

Unfortunately you cannot debug lambda functions
AWS has a better solution — Step Functions

Build distributed applications using visual workflows

Think serverless as microfunctions

Despite all great and powerful features of AWS, there are still some limitations — on the number of lambdas, buckets etc.

📢 Michele Bertoli — Test like its 2017

Great talk about Jest’ most useful and demanded features
Michele is testing microfone

Michele is the author of “React design patterns”, works in facebook

Tests make us faster, so there’s a sad excuse for not doing it, but still:
There are false negatives
They are hard to setup

Testing is important!
It can work as the documentation
Thus solving the update problem

Testing pyramid

The simpler variation of the pyramid is (from most important to less important) Functional tests -> Service tests -> UI tests

So… Jest, what is it?
It’s simple and powerful
Zero config required
Provides instant feedback
Fast and sandboxed
Coverage support for free
Mocking lib
Works with TypeScript

One of the peculiar features — Snapshot testing
First get the “picture” of a value,
that should be equal to the output of the function we testing
(notice that it’s not suitable for side effects functions and such)

Snapshots must be commited — this is the whole point of making them
Analyze how state changes over time

It doesn’t make sense for TDD, of course

Jest allows to write custom serializers, for instance for CSS in JS
Serializer here is a function that converts specific parts of the function output to the desired format, like this:

[1, 2, 3] ===> Array(3)

Do not write tests manually, let the machines help you:

  1. Snapguidist is a tool for Styleguidist (Styleguide lib for the React components)

2. React fix it is an extension for Chrome developer tools, that generates test case when specific error did occur

📢 Nikhil Verma — Visual regression testing from a tool to a process

Decent intro into VRT workflow and process organizing at company scale

Why we need another testing?

Imagine layered security swiss cheese model — each next layer of security has it’s vulnerabilities, but together they pose a solid and robust solution.
This can be applied to testing capabilities.

Nikhil demonstrates some features of Badoo VRT solution; 
2 modes are available:
- Manual mode via cli
- Auto mode via TeamCity

The main tool for VRT is based on CasperJS, PhantomJS and ResembleJS

It is very easy to locate the problematic area looking at screenshots

To be able to launch the tests, we must know when the content is ready:
- Add attribute to the page
- Inline all images (data:uri replacement)

Modern solution, that Nikhil develops and maintains runs all tests in 1.2 minutes instead of 6.8 minutes.

They use Inquirer module to script a desired test plan and run individual tests when needed

To implement a CI solution for VRT you need a hook and a trigger

Notifications possibilites:
- Email
- Slack
- Sound
- … whatever serves you best

Tests always should run to the end, since VRT alerts on changes, that can originate from re-design and common everyday changes

Cost of VRT implementation is about 2–3 weeks (1–2 engineers full-time)
The best thing that they do not require often updates


🔵 DAY 2–11th of May

📢 Dustin Whittle- Javascript @ Uber

Tons of material replete with various aspects of JS application in Uber codebase, very extensive, worth seeing

❗️Many images ahead, see full presentation on speakerdeck.com

Application is growing and used, there is no time to go back, always maintaining and evolving

Go, Java, NodeJS, Python

Ability to scale is very important
They rely on autonomous teams and hard engineering

Why JS and how is it used?

Invest in productivity, shifting to scalable architecture
In the end they would need a Platform (to rule them all)

Let builders build!
They now have 12000+ employees globally
Build standard tools and allow to build on top of that

Service foundation

1. Marketplace
Real time API serves 99.99% of http
Monolith app is not bad when theres a team constantly maintaining it
But Uber choice is microservices
Both approaches got pros and cons, though

Uber has built several open-source microservices, that are widely used for building applications and tools

Ringpop, TChannel and Jaeger

Lessons learned scaling:
In 5 years they expanded (unprecedented) from 400 to 12000+ engineers
Don’t be afraid of C++ 
Move from immature node modules to Java and Go

2. Web platform
The platform stack is pretty common
Express, nodeJS, npm (custom repo), React, Redux
Own yeoman builder for fast scaffolding
+ Client and server rendering

They use React standard components for consistent look and feel
Also, performance aspect is quiet of importance
Styletron is used for styling components

3. Visualize data
Visualization platforms are available on github
and built in top of deck.gl

4. Developer platform
Uber heavy invests in opensource community and projects:
Uber @ github
Uber web @ github
Engineering blog — developers.uber.com

📢 Fatos Hoti — What the hell is Fiber and why should I care

This talk was selected by JS community and discloses some features of future React (v16) reconciliation algorithm — Fiber

Mind, that Fiber is available for download, but not ready for production

Present React operates as the core module and multiple renders available

Fiber is:
- requestIdleCallback
- requestAnimationFrame

// you might want to use this method in the future
// current mechanism does not guarantee the right execution order
this.setState((state, props) => {});

Demo time: Hoti takes the useless application example to demonstrate how Fiber is different to present algorithm

Recommended video

📢 Paul Verbeek-Mast — Calendar and the fun of localization

See the correct talk name on the image below
In this presentation Paul overviews the process of developing the Calendar feature for Booking.com and why it can take 6–7 months to finish (or not)

Time and Date are among the most complex things to manage with JS
Some articles describe that extensively

Implementation story
At Booking.com they needed to build the service for reservation based on calendar seen on the other similar sites

Initial wireframe

1. Implementation
Advice — do not use Perl (duh)
moment.js 2.10.3, js-joda and some other tools and libs

2. Testing
RTL problem — fixed with CSS and some JS
More testing — manual testing, no unit testing

RTL solution

Some problems from users have been received…

3. Bug fixing
Issue with timezone in Brazil and switching to summer time, only specific to North part of Brazil — fixed after several months trading places for two subsequent operations (hell of a story, really)

Closed dates marked with red color? It is a positive color in Asian culture and nothing relates to closed state — changed that to gray-ish

Date selection not working — it appeared to be the bug in regex when parsing data with “.”, spaces and “/” delimiters
Paul explained that everywhere on the site the same date format is used and stored accordingly in the DB

Prices can not be seen — some prices in specific currencies can appear pretty long and overflow the calendar cells— Paul made font-size smaller

Lessons learned
- Do not rely on 3rd party tools like google translate (difficulties translating from some languages)
- It is impossible to now everything about date and time
- Lot’s of local differences and peculiarities
- Get more feedback before release

Paul mentioned in the end that he’s been working on improving some popular calendars like Hebrew and Julian and you might consider that as well, working on the international product / application / feature

📢 Maurizio Mangione — What Custom Elements are good for

The talk sums up various points on Custom Elements, Polymer and such and entices you to try it out if you are confronting multi-framework mess

After some years there came understanding that people do not actually distinguish Polymer and Web components much

In the modern JS world Component based architecture is the way to go

What Web components are

Browser support is not full, but polyfills are there to save a day

oops, something is missing…

Demo: live coding session creating a Custom Element

In order to distinguish Html native tags and Custom element tags you have to put the dash in a tag name, like this

<my-tag></my-tag>

Custom elements class structure is a bit different from the common one
Also it is important to use ES6 syntax (with babel transpiler if needed)

Custom elements support attribute values, which can be strings and more complex Objects.

Custom elements also provide support for custom events

Custom element events in a nutshell

Sometimes using innerHTML (…sucks, but…) is the most robust compromise to use, for instance when you need to re-render the diff, but no the whole component

It is possible to extend existing native elements, i.e. Button

Web components should work everywhere, but in reality it does not happen right out of the box; some actions / wrappers are needed; In React for instance, they replace native events with custom ones.

Maurizio mentioned Pattern library, but it’s not ready yet, so there’s no link and somewhat feasible demonstration

p.s. it would be really cool to see some examples with children properties and nested custom elements; hope the talk will evolve ;)

📢 Irina [#scripto] Shestak — Something about compression (knock-knock, cheesy talk name)

Creative brief overview of popular (gzip), stale (sdch) and promising (br) compression tools and algorithms

Nowadays we are creating lots of js traffic
data is compressed by 50% over http

deflate is a composition of 2 algorithms

Huffman — based on frequency / value and trees
LZ77 — search buffer and look ahead buffer

gzip is a different variation of deflate
And zlib is a version of gzip
More control, simply faster
Offers 9 presets for compression

Demo: live coding of implementing compression, comparing all three tools

Live coding in progress

brotli (br) is a newish algorithm, meant for http compression
It accepts commands
has a dictionary of html tags
It is 2x more effective
But it is 3 times slower

📢 Blake Newman — Vue.js service workers going realtime

The talks covers some history of Vue.js framework and gives an intro of some service workers’ powerful features

Vue.js was created by Evan You alone in 2013
Now the crew is 25 members
More than 50 plugins
160 (official) backers
110k github stars
800 npm releases
1.6 bln npm downloads
great docs

It is the progressive js framework

Vue.js is famous for plenty of features available

A lot of stuff comes out of the box, like Single file component feature
It is developed to be declarative

A modest announcement of the upcoming Vue.js event
You can find this and more interesting stuff at conf.vuejs.org

And now for the Service Workers
Demo featuring SW naive implementation on client and server side using WebSockets for communication

p.s. it was a bit hard to follow, hopefully Blake will improve the presentation for the event in Wroclaw

📢 Massimiliano Mantione — How much performance can you get of JS

From the proficient engineer (and now CTO) you will know what to take care of and what to expect starting optimizing your JS code
Massimiliano is dreaming of even better performance… Also there’s a mistake on the slide, can you spot it?

Before starting thinking of optimization you should know the potential of JS

Demo: small example program, calculating and collecting an array of numbers
It will be used as the base for the optimization during the talk

Initial results:
C++ is 4.5 times faster than js
We got to demand faster from js, but how much?
We need to be prepared

C++ is 4.5 times faster

V8 optimizes js in a number of different ways
And we have to “avoid the speed trap
That basically means avoiding specific mistakes
that could lead to substantial performance decrease

Speed trap #1

Objects and numbers are very different
JS can mix them freely
Avoid mixing different types in one Array

Values can be Objects, SMall Intergers (SMI) or boxed double
Prefer numeric values that can be 32bit integers

Speed trap#2

Large and sparse arrays cannot be optimized effectively

Speed trap #3

There are different parts of V8 apart from the well-known Full-codegen and Crankshaft

Ignition — interpreter that provides fast start
Turbofan compiler is optimized and more sophisticated than Crankshaft
Turbofan can even optimize try / catch, with etc. No more bailouts!

Are you prepared?

“Before I go”:
- Preallocate props — simple optimization like this helps to considerably increase operation speed

// original
const A = {a: 10, b: 20}
A.c = 30;
console.log(A.a + A.c);
// preferable
const A = {a: 10, b: 20, c: null}

- JS optimizations discussed here are not related to DOM, make sure the code you are going to optimize matches the requirement
- (pre) Set the array size; this pretty known, but underestimated micro-optimization helps to get even more speed from JS

p.s. for those who (as myself) got caught confused with all engines’ terminology I recommend this article to dispel the confusion


BACKSTAGE

The GRUSP organisation team had their own stand and even brewed their custom beer for the happy hour party at the venue. Solid respect for you, guys!

I especially enjoyed this T-shirt marketplace :)

T-shirts on sale — including some rare examples from the future

Job offers bulletin

More jobs!

And last but not least

Watch out for unicorn; I clicked several times!

And this is all from me; hope it was not much wordy, I tried my best making pictures!
I’m pretty sure you will be able to find the favourite speaker’s notes and slides on the Internet and in the nearest future see the full videos on youtube or wherever.

The conference was really interesting and engaging, I personally enjoyed the time spent at venue and Verona city and recommend it for attending.

If you find this useful and wish for more, please like the article and share the link! Thanks for reading!

p.s. In case of mistake or nasty typo please PM and I will fix it ASAP