FullStackCon Part 1: The JS Bits
Table of Contents
- Talk: TypeScript Decorators
- Talk: Npm, Gulp, Webpack, What the heck?
- Lightning Talk: In 15 minutes you can build an API with LoopBack
- Lightning Talk: Using React Native to Create a Reusable Mobile App Architecture
- Keynote: Node.js Releases, how do they work?
- Talk: Cross-Domain Components with React and XComponent, at PayPal
- Talk: Threat Modelling Node.js Applications
- Workshop: Serverless — The Battle of the Giants
- More to come
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.
The JS talks
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.
Npm, Gulp, Webpack, What the heck?
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” :
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.
Mark presented 5 Factor testing by Sarah Mei:
- Verify code is working correctly
- Prevent future regressions
- Way of documenting what the code does
- Provide design guidance
- Support refactoring
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.
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.
Lightning Talk: In 15 minutes you can build an API with LoopBack
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-cli
lb app- runs Yeoman generator to scaffold an app
lb databasourcee.g. mongo
Recommends 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!
Lightning Talk: Using React Native to Create a Reusable Mobile App Architecture
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:
- a promise in a variable is already running via constructor — greedy!
- the values are unavailable outside the chain
- only the previous step is accessible
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.
Keynote: Node.js Releases, how do they work?
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.
Myles also showed a tool to look at the commits going into a release, and a command which outputs markdown with the issue links.
Cross-Domain Components with React and XComponent, at PayPal
Daniel Brain raises the point that we are comfortable sharing code as developers, that we share:
- Code via GitHub, or alternative
- Data via APIs
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?
Use Case: Share Paypal Checkout on Etsy
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).
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.
Threat Modelling Node.js Applications
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.
We were introduced to:
- Attack Trees: conceptual diagrams showing how an asset, or target, might be attacked
- Stride — categorizing and classification system for known threats
- Dread — A risk assessment model for categorising and quantifying threats on your system from 0 to 10 per threat
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.
Workshop: Serverless — The Battle of the Giants
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.
More to come
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.