Photo by Ed Telling during FullStackCon 2017.
#FullStackCon 2017 — a conference on JavaScript, Node & Internet of Things. It was the 4th year of the conference, I believe, having started back in 2014. It was held in London again this year, from July 12th to 14th.
It was a great conference and a chance to meet the international JavaScript, Node, and IoT communities and to learn and share skills with some of the world's top experts, hackers and makers. A fantastic opportunity for someone like me, moving from the PHP world, towards JS development architectures.
In this two-part blog series, I will highlight some of the talks I went to, to give a picture of what I learned, and provide an overview of what the conference has to offer in general. In this post, I will talk about the JS bits, and in the next post, I will cover the non-JS / not so JS bits.
My first talk after the introductory Keynote was on Typescript Decorators, by Damjan Vujnovic. Although I had heard many of my colleagues in X-Team talking about their love for Typescript, and I had an idea what it was for, this was my first close-up look at it.
This talk showed how we could use Typescript to decorate methods to provide logging, fallbacks, loading icons during method execution, conditional elements, etc. We could do this without modifying the original method, thus allowing us to keep the business logic clean — great!
The examples were using Angular mostly, but we could see the benefits of typescript in other JS contexts.
This talk was by Ruben Sospedra and outlined a misconception in build process tools, where it is common to choose Webpack for everything, but that it is not always what you need.
He started by using a basic React example and this GitHub repo for the talk, evolving it per different use case.
Pipelines are "command chains" in tools such as Gulp and Grunt. An overview was shown on using Gulp in npm build to execute the pipeline including Uglify, file rename, add to build directory, etc.
Transpilers are code transformers such as Babel (babel-cli, babel-reset-react). Examples were then shown, using npm "scripts" : prebuild, build, and post build.
When should you use a transpiler?
Only when you need one, such as when you need to use sugar syntax: JSX, ES6, etc.
Bundlers are module compilers which via npm build navigate dependencies and environments to determine what is needed in a bundle. E.g. Webpack, rollup, and fuse-box.
When do you need a bundler?
Almost always when building a front-end application. On the backend, almost never.
Advice: Consider Webpack for products and Rollup for libraries.
Scaffolders are configurable boilerplate generators.
A tool called Lerna was introduced for managing packages within a mono-repo, similar to Loadash, for cases where we want to require a package from within a wider package. It ensures package, core package, and micro-service package dependencies remain in-sync.
E.g. Brunch, Yeoman, and create-react-app.
Core team maintainer, Mark Wubben gave this high-level talk on Ava, the testing framework with the largest rise in GitHub stars in 2016.
Mark presented 5 Factor testing by Sarah Mei:
He stated that Ava has no company backing, a friendly, open community, that motivates towards growing contributors.
Ava allows for unit testing, integration testing, regression testing, destructive testing (testing for fails), functional testing.
This keynote was given by Dylan Schiemann, co-creator and maintainer of Dojo Toolkit. An open source JS toolkit, developed with Enterprise in mind, scaling with your development process.
Photo by Ed Telling during FullStackCon 2017.
Dylan gave an overview on the history and state of JavaScript, highlighting JS fatigue, current prominent frameworks, PWAs, etc.
He advised not to revisit tech decisions on chosen technologies so regularly as it is an ever changing area, and this can lead to the feeling that decisions were made with poor judgment. Rather, document why decisions were made at the time, and this can be used as part of developer on-boarding onto projects, to give them insight; i.e. some months down the line, a different decision may have been chosen, but it might not have been an option at the time for whatever reasons.
An audience question was asked at the end of the session on whether clients trust JS for enterprise and how you sell JS to them v.s. more traditional approaches, be it Java, PHP etc. Dylan is finding the opposite, that clients are now specifically requesting JS, but that the industry lacks enterprise JS engineers.
Erin McKean took us quickly through an online demo of creating a functional API in minutes. She started with an analogy: more people like to eat cake than bake cake, same for APIs (also relating cake mix to boiler-plate code).
npm install -g loopback-clilb app - runs Yeoman generator to scaffold an applb databasource e.g. mongoRecommends using a clipboard manager: e.g. Copy'Em Paste [paid app]
There were quite a few prompts for API endpoints and types, etc. to generate the working API, but it really was up and running in minutes — looks good!
Richard McMenamin recommended a few starting points for developers: Expo.io or create-react-native-app.
He also highlighted HockeyApp, Visual Studio Mobile Center, and Fastlane, an app for improving the speed of the release process.
There were some "Gotchas" to be aware of: bridging for certain features per environment is required in cases, and maturity in this area is lacking, which causes regular breaking changes. There is about 80% code reuse for simple apps cross-platform.
NativeScript uses a lower layer trying to get 100% reuse. However, it is a more opinionated system. Titanium is more mature, more in line with React Native in knowing differences in platforms / environments from a developer perspective.
Tomasz Ducin states that Functions are the most important building block of JS, where there are 5 ways to handle async operations: Callbacks, Events, Promises, Coroutines, and Reactive Streams.
He informs of the limitations of Promises:
He states that Lists are greedy due to the use of array, but that Generators are lazy via the use of yield. Coroutines were presented, which are Promises + Generators. He highlighted the differences in Sequential processing v.s. Parallel processing.
The ES8 syntax was raised for its definition of asynchronous functions, where the await keyword is used, which in cases is better than chained Promises via yield.
He makes it clear that you cannot nest async functions, as yield or await will give a syntax error.
Async Iteration and Stream based mapping were also introduced.
Myles Borins - NodeJS core committer and Google guy named his talk after lyrics in, Miracles, an Insane Cloud Posé song pondering how magnets work, amongst other things (linked for convenience).
A brief history of node versioning, where io.js (versions 1-3) split and then merged again with Node, starting at version 4.
He talked through Semver usage and how console.log calls are considered breaking changes in node, due to command line tooling, so this increases the major version.
Demo time: A walkthrough of the review and commit process with an example of pushing selected changes to the node release staging branch.
Overview of some tools such as branch-diff and piping | cherry picked commits using xargs.
Myles also showed a tool to look at the commits going into a release, and a command which outputs markdown with the issue links.
Daniel Brain raises the point that we are comfortable sharing code as developers, that we share:
However, how do we share "Web Experiences"?
React has taken over the world with web components which are now commonplace in other frameworks
Webpack makes this easy with a simple npm publish and share. However, this is only for the framework you are using, and what if there is sensitive data you do not want to share?
In this case, we have CORS restrictions, CSRF issues, etc. Paypal has had 302 redirects out and back with parameters, they have iframes, sending messages / params into the iframe, but none really did exactly what they wanted.
Solution: Make iframes better: XComponents can pass in React dependencies as parameters. This has benefits such as, user recognition, customization per site, portability, AB tests, sandboxing, button customization, etc.
It has a 2 step render process: initial HTML / CSS is loaded and then the 2nd render, with more advanced interaction (unknown to the user).
Using RenderTo, they can render iframes to other parts of the page, by rendering iframes to the parent window. E.g. A Paypal button to render.
Gergely Nemeth started by outlining how Civil Engineering has influenced modern software security, then went on to give an overview of what threat modelling is, threat modelling in practice and then in NodeJS applications.
Photo by Ed Telling during FullStackCon 2017.
We were introduced to:
However, 95% security incidents are human error, e.g. using the same password, sending passwords over Slack, etc. We are the weakest link.
Gergely suggested writing test cases for the most important security areas of the application.
Tools such as Screen I/O were mentioned, which looks like it effectively monitors your employees, protecting against data leaks.
Christos Matskas and Luciano Mammino provided this workshop, where, following an introduction, split the room in 2, one for AWS, one for MS Azure. Luciano looked after the AWS Lambda workshop (Docs) and Christos took Microsoft Azure.
I couldn’t install Azure CLI as you need a Windows machine, so I requested to be moved to AWS group.
I was quite busy leading up to the conference, so I did not get the prerequisites completed, but it was a good lesson learned.
If attending a workshop, make time to ensure you have the prerequisites completed.
I had some AWS setup issues, as it required phone verification and I was roaming, large delay in receiving SMS messages, etc.
I got the Hello World app working however, deployed and tested using Postman. I was happy about this after all the issues with set-up. As our X-Team CEO states, however, Hello World is not the Finish Line, so I will surely go further with Serverless in the near future.
This was a good workshop, it was interesting to see how Serverless is encouraging performant code on the web, as you pay per function execution, time and memory consumption.
You can use the Serverless Calculator to estimate your costs.
In the following post, I will detail the not-so-JS parts and outline what was learned, providing more useful tips and links to get started in various areas.
If you want to check out any of the talks mentioned or other talks, take a look at the recorded Skillcasts per talk.