Autumn is well on it’s way and winds are bringing rains and clouds to the sky. Autumn also means that meetups are awaken and interesting stories from the field are presented. Here’s monthly notes for September. Start with writing readable code, continue to build React app with TypeScript, read how hacker puzzles can be solved and improve your designs with tactics instead of talent. Also use smarted command line tools and listen a Kubernetes security journey.
Issue 34, 29.9.2018
Software Development
10 practices for writing readable code
Writing readable code may seem subjective but there are core elements within all code which make it readable. Follow these 10 practices. Although I don’t quite agree with removing comments ?
(from @walokra)
Software disenchantment
“As engineers, we can, and should, and will do better. Have better tools, build better apps, faster, more predictable, more reliable, using fewer resources”. But on the other hand people won’t pay for efficiency. They buy solutions to their problems. (from @walokra)
JavaScript
Fullstack Express-React App With TypeScript
Have you thought about starting a React app with TypeScript and integrating it with Travis CI and Heroku? Read this definitive guide and check the source of a starter kit for a full stack express-react app. (from @walokra)
Solving the Disobey 2018 puzzle
Great writeup of solving the Disobey.fi 2019 hacker ticket puzzle. Shows you some tools and techniques you can use to progress with these kind of puzzles. Contains spoilers, so steer clear if you want the fulfilment and bliss that comes from solving it. (from @walokra)
This talk is about you [React Native Developer] (video)
Life of a React Native developer? Jani Eväkallio talks about you at React Native EU 2018. When building software products we’re focused on “how” but should ask also “what” and “why”. Not just be happy when tickets move from left to right side of the screen. (from @walokra)
7 Practical Tips for Cheating at Design
“Improving your designs with tactics instead of talent.” Every web developer inevitably runs into situations where they need to make visual design decisions, whether they like it or not. There are a ton of tricks you can use to level up your work that don’t require a background in graphic design. Here are seven simple ideas you can use to improve your designs today.
Tools of the trade
CLI: improved
Command line is powerful tool but the common tools can be improved. Remy Sharp wrote his current list of improved CLI tools.
Jaeger
Open source, end-to-end distributed tracing to monitor and troubleshoot transactions in complex distributed systems.
How to Design for the Modern Web
Best Practices of Modern Web Development. “You are now also certified and ready to apply for top ranking sites like Reddit and Medium”. (from @walokra)
Red Hat Forum Finland 2018 was held 11.9.2018 at Finlandia-talo and it’s mainline was “Ideas worth exploring. Come with questions. Leave with ideas.” The event was divided to keynote and to four breakout sessions. The four breakout sessions were: 1. Automation – Ansible 2. Journey to Cloud-Native Applications with OpenShift 3. Business & Solution track 4. Half day Executive discussions and round tables. I chose to get hands-on with OpenShift but also Ansible would’ve been interesting. Here’s my notes from the event.
Red Hat Forum Finland 2018: Ideas worth exploring
Red Hat Forum 2018 Helsinki started with keynote session by Michel Isnard from Red Hat and in “Digital transformation & the open organization” he talked about open source and how Red Hat embraces it. “Open source is collaborative curiosity, a culture with a desire to connect and the technologies to do it. Yet what draws our attention isn’t the technology alone; it’s what we can do with it. It gives us the platform for imagination, a focal point to collectively push for new possibilities.”
Next there was customer reference by Markku Reinikainen from SOS International. He told us about their open innovation platform and how they have modernized their applications and moved to the mobile world.
SOS International: Open innovation platform
Journey to Cloud-Native Applications with OpenShift
The main content of the Red Hat Forum event were the breakout sessions. I chose the full day hands-on workshop which showed how to modernize an existing legacy monolithic application by applying microservice architecture principles, using modern lightweight runtimes like WildFly Swarm (Thorntail.io) and Spring Boot, and deploying to container-based infrastructure using OpenShift Container Platform. The material and slides are available on GitHub.
Hands-on OpenShift
The lab was split into four scenarios, going through the process of understanding how a developer can most effectively use Red Hat technologies in deploying a monolith to OpenShift, wrapping it with a CI/CD pipeline, developing microservices to start replacing functionality in the monolith, and integrating it all together to form the beginnings of a complete modernization of an existing app. The last scenario was about using Istio to prevent and detect issues in a distributed system.
The session started with Red Hat Application Migration Toolkit (RHAMT) and migrating (lift & shift) Java EE monolith app on WebLogic to run on JBoss EAP and OpenShift in the cloud. Crafty tool which fixed poor and non-standard choices done in legacy app.
Hands-on: Red Hat Application Migration Tool (@walokra)
The breakout session had also a talk from Red Hat partner. “Shift to a Cloud-First Core” talk by Capgemini told how they are approaching OpenShift projects. Different options, some are easier depending of legacy technologies. Retain, retire, migrate: lift & shift, new layers, new apps.
OpenShift hands-on session continued with developer introduction which was about live synchronization and changes, deploying to different environments, Jenkins Pipeline, Continuous Delivery and approval steps.
Third and fourth scenarios were about strangling the monolith with transforming it to microservices architecture with and without Spring Boot. Splitting up monolith to domain specific applications and connecting them. Lots of things that goes over the hill and seems magic if you’re not familiar with them. You just click click click, done, profit. Some technologies used were Spring Boot and Spring Cloud, Snowdrop, Feign and Hystrix.
Strangling the monolith
The last and most interesting part of the hands-on session was Istio and resilient apps and due time schedule Red Hat guy clicked and talked it through. It gave good overview to visualization, monitoring, metrics, fault injection, traffic shifting, circuit breaking, rate limiting and tracing. Time was limited so much things left to be read.
All the OpenShift scenarios used Katacoda which made the hands-on experience with just a few clicks. Crafty tool for this kind of sessions and although you just clicked through with relative fast pace. For example “Developer Introduction to OpenShift” estimated time 45-60 minutes and the lab had 23 minutes. The limited time made the hands-on experience somewhat superficial but you got the point what the possibilities are and how OpenShift works.
And last Red Hat talked about OpenShift and their services regarding application modernization. Modernization of legacy applications is in high demand and there are different paths to achieve that.
One point regarding monoliths vs. microservices was that as Martin Fowler wrotes in Monolith First.: “you shouldn’t start a new project with microservices, even if you’re sure your application will be big enough to make it worthwhile.” Martin Fowler: Monolith first
Red Hat Application Migration and Modernization Program
Summary
Red Hat Forum Finland 2018 was nice event and the content was interesting. The hands-on session was fast paced but you got the point and ideas worth exploring. Will look into Istio. The WiFi network had some problems but got better when more access points were added. After the official program there was some networking and drinks. Some food other than hemp snacks and vegetable chips would’ve been nice but Woolshed provided in that regard. Thanks for Red Hat for organizing the event and good talks.
To continue with OpenShift topics you can check learn.openshift.com which has similar material as in hands-on and use Katacoda but different topics. The hands-on material can be read from GitHub and for listening there’s DevNation Podcasts.
React Helsinki August 2018 meetup was hosted by Smartly.io at their office in Postitalo next to the Central Railway Station. Here’s my short notes from the event. To follow the community, React Helsinki has also a Facebook group.
The meetup started with Splitting React codebases for increased development speed by Hugo Kiiski from Smartly.io. He told how their Video Editor component is separated from main frontend. Code is in monorepo managed by Lerna. More tools going to be splitted. The recording of the presentation can be seen on Vimeo. (Twitter)
Splitting React codebases for increased development speed
Second topic was live coding and Making your own Ignite generator – for React Native by Toni Ristola from Gofore. It’s useful e.g. if you do many projects in a year. The recording of the presentation can be seen on Vimeo. (Twitter)
When to use generator
Why build your own
Use GraphQL! by Mikhail Novikov showed a quick intro to GraphQL, covered the current state of its adoption and described several ways of how to move to GraphQL. GraphQL “fills the gap between client and server developer needs and values. Matching server capabilities with client requirements.” GraphQL clients to use are i.a. Apollo and Relay. See the slides for more information. The recording of the presentation can be seen on Vimeo. (Twitter)
GraphQL parts
GraphQL adoption
As I mentioned the event has hosted by Smartly.io and their office in Postitalo was cosy and had nice demo room for the meetup. Also the food and beverages were nice althought the hamburger patty was a bit too raw.
Summer has turned to Autumn and it begins to show in the weather. Sun is setting earlier and soon it’s dark almost from dawn to dusk, rain clouds are gathering in the sky with cold winds. Good time to stay inside and read some articles and learn new things. Here’s the monthly notes for August.
Issue 33, 28.8.2018
Learning
Elements of Artificial Intelligence free online course
“Do you wonder what AI really means? Are you thinking about the kind of impact AI might have on your job or life? Do you want to understand how AI will develop and affect us in the coming years? Then this is the course for you!”
Microservices and cloud
Docker Pattern: The Build Container
Let’s say that you’re developing a microservice in a compiled language or an interpreted language that requires some additional “build” steps to package and lint your application code. This is a useful docker pattern for the “build” container.
Experiences with running PostgreSQL on Kubernetes
Gravitational CTO, Sasha Klizhentas, tells about his experience running PostgreSQL on Kubernetes. The challenges involved, open source and commercial tools that can help and other alternatives to managing stateful applications on Kubernetes.
Google Cloud Platform – The Good, Bad, and Ugly (It’s Mostly Good)
Deps developer tells his thoughts about Google Cloud Platform and splits them into good, meh, bad, ugly, and opportunities for improvement. He compares and contrasts with Amazon Web Services (AWS), the other hosting provider that he has the most experience with, and GCP’s biggest competitor.
Goodbye Microservices: From 100s of problem children to 1 superstar
Segment’s story of going to microservices architecture and back. “When deciding between microservices or a monolith, there are different factors to consider with each. In some parts of our infrastructure, microservices work well but our server-side destinations were a perfect example of how this popular trend can actually hurt productivity and performance. It turns out, the solution for us was a monolith.”
Have you ever needed to generate a random number in code?
Have you ever needed to generate a random number in code? whether it’s for rolling a dice, or shuffling a set, this tweet thread is here for you! There’s no reason that it should be easy or obvious, very experienced programmers repeat common mistakes. I did, before I learned … from (@colmmacc)
Tools of the trade
Semantic Commit Messages
See how a minor change to your commit message style can make you a better programmer. Format: <type>(<scope>): <subject>. <scope> is optional.
Something different
The Psychology of Money “Let me tell you the story of two investors, neither of whom knew each other, but whose paths crossed in an interesting way.”
Summer season is heating up and here’s the monthly notes for July. Something about JavaScript, little bit of design, touch of privacy and tools of the trade.
Issue 32, 23.7.2018
JavaScript
Defining Component APIs in React
Collects some of the best practices for working with React. “The following is a collection of thoughts, opinions, and advice for defining component APIs that are meant to be more flexible, composable, and easier to understand. None of these are hard-and-fast rules, but they’ve helped guide the way I think about organizing and creating components.” (from Weekend reading)
TIL: node-jsmin (port of Crockford’s JSMin) was dropped from a lot of places as modified MIT license with “The Software shall be used for Good, not Evil” is not compliant with definition of open source software which doesn’t permit any restriction on how software may be used. (from @walokra)
Microservices
Introducing Jib — build Java Docker images better
“Jib, an open-source Java containerizer from Google that lets Java developers build containers using the Java tools they know. Jib is a fast and simple container image builder that handles all the steps of packaging your application into a container image. It does not require you to write a Dockerfile or have docker installed, and it is directly integrated into Maven and Gradle.”
Design
Brutalist Web Design
TL;DR; Content is readable on ~all screens & devices. Only hyperlinks & buttons respond to clicks. Hyperlinks are underlined, buttons are buttons. Back button works. View content by scrolling. Decoration when needed and no unrelated content. Performance is a feature. (from @walokra)
Little known trick: the <script> tag in html runs the code inside, and also hides it using css display:none. But I can change that to display:block, so that I can show sample code to the reader and also run it on the page to generate diagrams. (need to test across browsers). This also applies to <style> tags, where you can also use contentEditable to create a live editable css of the page you are on. (from @ Amit Patel)
Browsh
Terminal-based web browser renders everything a modern browser can (HTML5, CSS3, JS, video, even WebGL). Use case: run the browser in a data center with fast internet, and access it over SSH from a device that has slow/limited internet. (from Weekend reading)
“petition to make “paste and match formatting” the default paste option”
Privacy
Riot Games Approach to Anti-Cheat
Riot Games published an article about their anti-cheating methods – nothing really fancy or new but, in the Hacker News thread there was an interesting comment by a cheat writer:
“The current Mac game client for League Of Legends contains full debug symbols and it doesn’t have Packman (the packer described in this article), which makes it quite easy to look through the symbols. Inside you can find all of the anti-cheat-related network packets. Now, I personally expect anti-cheat to snoop around my system when I’m doing something shady like scanning its memory. However, if I was a normal user of the game, I would be a bit concerned to know that it might be sending my recently used file names, drive names, system driver names, currently running processes, processor information, system state, and even entire binary files that it automatically deems as “suspicious”, to their servers.”
@aral and maya kosoff: “X is a service that enables you to control articles presented to your wife on the websites she usually visits, in order to influence her on a subconscious level to initiate sex. The best bit? It’s “just” adtech. It’s retargeting. It’s how Google makes money.” Also suggested use cases are “get your kid a dog” or “stop drinking” which eems to open up a whole new acquaintance micromarketing concept. Makes you think how you’re influenced and by whom.
@dhh
“Imgur’s fake adherence to GDPR is exactly the kind of transgression that should trigger those multi-million euro fines. There are literally HUNDREDS and HUNDREDS of shady services getting your data. Only bulk link is to ALLOW ALL, which is also default. Tons you can’t opt-out. ?”
Something different
StemCAPtain
“The StemCAPtain replaces the stem cap, aka top cap, piece of a threadless 1″ or 1 1/8″ headset with different functional accessories. In addition to the simple and elegant analog clock, we offer a thermometer, bottle opener, picture frame, compass, GPS mount, and USB charger”
Writing documentation is always a task which isn’t much liked and especially with diagrams and flowcharts there’s the problem of which tools to use. One crafty tool is Draw.io with web and desktop editors but what to use if you want to write documentation as a code and see the changes clearly in text format and maintain source-controlled diagrams? One of the tools for drawing diagrams with human readable text are mermaid and PlantUML.
mermaid
“Generation of diagrams and flowcharts from text in a similar manner as markdown.”
mermaid is a simple markdown-like script language for generating charts from text via javascript. You can try it in live editor.
mermaid sequence diagram
You can write mermaid diagrams in text editor but it’s better to use some editor with plugins to preview your work. Markdown Preview Enhanced for Atom and VS Code can render mermaid and PlantUML. There’s also dedicated preview plugins for VS Code and Atom.
To preview mermaid definition in VS Code with Markdown Preview Enhanced press Cmd-P to open Command palette and select Markdown Preview Enhanced: Open Preview.
mermaid in VS Code with Markdown Preview Enhanced
To preview mermaid definition in VS Code with Mermaid Preview press Cmd-P to open Command palette and select Preview Mermaid Diagram.
mermaid in VS Code with Mermaid preview
Generating PNG images from mermaid definitions
To use mermaid diagrams it’s useful to export them to PNGs. You can use mermaid.cli tool which takes a mermaid definition file as input and generates svg/png/pdf file as output.
If you have plenty of defition files you can use the following script to generate PNGs:
#!/usr/bin/env bash
for mmd in ./docs/*.mmd
do
filename="${mmd##*/}"
echo "Generating $mmd"
./node_modules/.bin/mmdc -i $mmd -o ${filename%%.*}.png
done
#!/usr/bin/env bash
for mmd in ./docs/*.mmd
do
filename="${mmd##*/}"
echo "Generating $mmd"
./node_modules/.bin/mmdc -i $mmd -o ${filename%%.*}.png
done
Alternatively you can use node_modules/mermaid/bin/mermaid.js $mmd where mmd is the mermaid file.
PlantUML diagrams
PlantUML is used to draw UML diagrams, using a simple and human readable text description.
PlantUML is used to draw UML diagrams, using a simple and human readable text description. Diagrams are defined using a simple and intuitive language (pdf) and images can be generated in PNG, in SVG or in LaTeX format.
You can use PlantUML to write e.g. sequence diagrams, usecase diagrams, class diagrams, component diagrams, state diagrams and deployment diagrams.
To preview PlantUML diagram in VS Code with Markdown Preview Enhanced press Cmd-P to open Command palette and select Markdown Preview Enhanced: Open Preview.
PlantUML in VS Code with Markdown Preview Enhanced
There’s an online demo server which you can use to view PlantUML diagrams. The whole diagram is compressed into the URL itself and diagram data is stored in PNG metadata, so you can fetch it even from a downloaded image. For example this link opens the PlantUML Server with a simple Authentication activity diagram.
Running PlantUML server locally
Although you can render PlantUML diagrams online it’s better for usability and security reasons to install a local server. And this approach is important if you plan to generate diagrams with sensitive information. The easiest path is to run PlantUML Server Docker container and configure localhost as server.
docker run -d -p 8080:8080 plantuml/plantuml-server:jetty
docker run -d -p 8080:8080 plantuml/plantuml-server:jetty
In VS Code config, open user setting, and configure like:
Now to preview diagram in VS Code press alt-D to start PlantUML preview.
PlantUML preview in VS Code and local server
You can also generate diagrams from the command line. First download PlantUML compiled Jar and run the following command which will look for @startXXX into file1, file2 and file3. For each diagram, a .png file will be created.
java -jar plantuml.jar file1 file2 file3
java -jar plantuml.jar file1 file2 file3
The plantuml.jar needs Graphviz for dot (graph description language) and on macOS you can install it from Homebrew: brew install graphviz.
For processing a whole directory, you can use the following command which will search for @startXXX and @endXXX in .c, .h, .cpp, .txt, .pu, .tex, .html, .htm or .java files of the given directories:
java -jar plantuml.jar "directory1" "directory2"
java -jar plantuml.jar "directory1" "directory2"
Maintain source-controlled diagrams as a code
Documentation and drawing diagrams can be simple and maintaining source-controlled diagrams with tools like PlantUML and mermaid is achievable. These tools are not like the behemoth of Sparx Enterprise Architect but provide light and easy way to draw different diagrams for software development. You don’t have to draw lines and position labels manually as they are magically added where they fit and you even get as crude boxes and squares as thousands of dollars more expensive tools. Now the question is which tool to choose: PlantUML or mermaid?
The first part of Summer has been great and holiday season is near. Here’s monthly notes for June with topics of microservices, kubernetes, design patterns and stories of how Shopify and Airbnb build their services. Also some tools like Kap. Happy reading.
Issue 31, 28.6.2018
Microservices
7 tips for effective microservices
“Have a request-id/correlation-id for every request, Maintain backward compatibility of interfaces, Have a centralized logging system, Implement idempotency and retries, Be aware of language constraints, Have a single service to manage the system state, Strike a balance between in-memory-data and db persistence” (from The Microservice Weekly)
Kubernetes
AWS Workshop for Kubernetes
“Self-paced workshop designed for Development and Operations teams who would like to leverage Kubernetes on Amazon Web Services (AWS).”
Kubernetes best practices: terminating with grace
“This episode of “Kubernetes Best Practices,” let’s take a look at how you can help Kubernetes do its job more efficiently and reduce the downtime your applications experience.”
xcprojectlint: A security blanket for Xcode project files
Would you like to automate some consistency in your Xcode project files with checks for settings defined at the project level (rather than in an xcconfig), missing files and empty file groups? This tool does exactly that, and more. Also, I like the way it’s described: “Provides a security blanket, ensuring neither your co-workers, nor git screw up your Xcode project file.” (from iOS Dev Weekly 353)
Shopify Infrastructure with Niko Kurtti
“Shopify has built its own platform-as-a-service on top of Kubernetes called Cloudbuddies. Niko Kurtti is a production engineer at Shopify joins the Software Engineering Daily show to describe Shopify’s infrastructure – how they run so many stores, how they distribute those stores across their infrastructure, and the motivation for building their own internal platform on top of Kubernetes.”
Building Services at Airbnb, Part 1
The first in a series on scaling service development, this article looks at the core structure, the Service IDL, underpinning the new Services Oriented Architecture at Airbnb.
Building Services at Airbnb, Part 2
The second in a series on scaling service development, this article looks at some of the key tooling that supports the new Services Oriented Architecture at Airbnb.
Awesome design patterns
A curated list of software and architecture related design patterns. Software design pattern – A general, reusable solution to a commonly occurring problem within a given context in software design. It is a description or template for how to solve a problem that can be used in many different situations.
Something Different
Cool Backgrounds
Collection of tools to create compelling, colorful images for blogs, social media, and websites. Beyond backgrounds, the images generated can be used as ? desktop wallpapers or cropped for ? mobile wallpapers.
OWASP Helsinki Chapter held a meeting number 34 last week at Eficode with topics of
“Perfectly secure API” and “Best friends: API security & API management”. The event gave good overview to the topics covered and was quite packed with people. Eficode’s premises were modern and there was snacks and beverages. And also a sauna. Here is a short recap of the talks.
OWASP Helsinki Chapter Meeting 34
Perfectly secure API
Matti Suominen from Nixu talked about perfectly secure API and things related to get there. Can API be secure? On gut feeling APIs seems to be rubbish and have problems. He covered the topic from three view points: security, risks and defense. Good starting point is to read OWASP resources like ASVS, Top 10 and Security cheat sheet. Also implement security centrally, involve business in design and DIY never works out.
Antti Virtanen from Solita talked about API security and API management and how we’ve traveled from dark ages to modern times. You can do API security with tools like Amazon AWS API Gateway but the main point was to step further with API management. Use some already made products like Apigee and open source alternative Tyk.io. Slides are available in Slideshare.
From dark ages to modern ages and better API security with #API management as @anakonantti from @SolitaOy showed at #OWASPHelsinki meetup. #Apigee is one solution. Step further from API gateway, adds DX and publishing tools. Open source alternative is @tyk_io but it’s complex. pic.twitter.com/re69veD9bx
Summer is approaching and even in Finland the weather is sunny and warm. I’ve been busy as the Enduro-MTB racing season has started and most weekends are spent at the race track. But here’s monthly notes for May with topics of state of the Web, how geolocation in browsers work, and something about tools. Happy reading.
Ever stop to think about geolocation in your desktop browser?
tl;dr; location is triangulated by location services like Mozilla & Google from scan of nearby Wi-Fi access points’ signal strength and their known locations. List is collected when people walk with a phone with GPS and Wi-Fi on which polls networks. (from @walokra)
Is GraphQL The Future?
If you are not sold on GraphQL then this post might tip you over the edge. Alan Johnson does a great job in explaining the awesomeness that GraphQL has to offer. (from Web Design Weekly 321)
Tools for making HTTP requests
Imsomnia
Powerful HTTP and GraphQL tool belt. Debug APIs like a human, not a robot. Finally, a REST client you’ll love.
RESTed – Simple HTTP Requests
RESTed allows developers to quickly format and make HTTP requests and view the response. For Mac.
Paw
Paw is a full-featured HTTP client that lets you test and describe the APIs you build or consume. It has a beautiful native macOS interface to compose requests, inspect server responses, generate client code and export API definitions.
Security
US cell carriers are selling access to real-time phone location data
Intriguing thoughts: “Access to your real-time phone location data is sold to companies and public has zero idea how much personal location data is available. It is done throughout the industrialized world to varying degrees.” e.g. stocks are traded based on where peoole go. (from @walokra)
JavaScript
`npm audit`: identify and fix insecure dependencies
“npm audit is a new command that performs a moment-in-time security review of your project’s dependency tree. Audit reports contain information about security vulnerabilities in your dependencies and can help you fix a vulnerability by providing simple-to-run npm commands and recommendations for further troubleshooting.” (from JavaScript Daily)
JavaScript Algorithms and Data Structures
A wide variety of algorithms (e.g. permutations, Levenshtein distance, binary search) and data structures (e.g. linked lists, trees, stacks) implemented in JavaScript with explanations and links to further reading. (from JavaScript Weekly 387)
Unchained: A story of love, loss, and blockchain
> It was a smart contract that stipulated sexual fidelity and parental responsibilities. Tokens from their joint earnings paid the AI judges and IoT sensor oracles that monitored contract violations. On mornings like this, you really needed commitment that was mathematically provable, not just an empty promise at the altar.
React Finland 2018 conference was held last week and I had the opportunity to attend it and listen what’s hot in the React world. The conference started with workshops and after that there was two days of talks of React, React Native, React VR and all things that go with developing web applications with them. The two conference days were packed with great talks and new information. This is the second part of my recap of the talks and my notes which I posted to Twitter. Check out also the first part of my notes from the first day’s talks.
React Finland 2018, Day 2
How React changed everything — Ken Wheeler
Second day started with keynote by Ken Wheeler. He examined how React changed the front end landscape as we know it and started it with nice time travel to the 90s with i.a. Flash, JavaScript and AngularJS. Most importantly the talk took a look at the core idea of React, and why it transcends language or rendering target and posit on what that means going forward. And last we heard about what React async: suspense and time slicing.
“Best part of React is the community”
How React changed everything
Get started with Reason — Nik Graf
The keynote also touched Reason ML and Nik Graf went into details kicking off with the basics and going into how to leverage features like variant types and pattern matching to make impossible states impossible.
Get started with Reason ML
Making Unreasonable States Impossible — Patrick Stapfer
Based on “Get started with Reason” Patrick Stapfer’s talk went deeper into the world of variant types and pattern matching and put them into a practical context. The talk was nice learning by doing TicTacToe live coding. It showed how Reason ML helps you design solid APIs, which are impossible to misuse by consumers. We also got more insights into practical ReasonReact code. Presentation is available on the Internet.
Conclusion about ReasonReact:
More rigid design
More KISS (keep it simple, stupid) than DRY (don’t repeat yourself)
Forces edge-cases to be handled
Learning Reason by doing TicTacToe
Reactive State Machines and Statecharts — David Khourshid
David Khourshid’s talk about state machines and statecharts was interesting. Functional + reactive approach to state machines can make it much easier to understand, visualize, implement and automatically create tests for complex user interfaces and flows. Model the code and automatically generate exhaustive tests for every possible permutation of the code. Things mentioned: React automata, xstate. Slides are available on the Internet.
“Model once, implement anywhere” – David Khourshid
The talk was surprisingly interesting especially for use cases as anything to make testing better is good. This might be something to look into.
Compelling use case for state machines is: model code & automatically generate exhaustive tests for every possible permutation of the code. @DavidKPiano and surprisingly interesting talk of Reactive State Machines and Statechart at #ReactFinland. "Model once, implement anywhere" pic.twitter.com/v5iynBA4te
After theory heavy presentations we got into more visual stuff: React VR. Shay Keinan presented the core concepts behind VR, showed different demonstrations, and how to get started with React VR and how to add new features from the Three.js library. React VR: Three.js + React Native = 360 and VR content. On the VR device side it was mentioned that Oculus Go, HTC Vive Focus are the big step to Virtual Reality.
“Virtual Reality’s possibilities are endless. Compares to lucid dreaming.” – Shay Keinan
WebVR enables web developers to create frictionless, immersive experiences and we got to see Solar demo and Three VR demo which were lit ?.
React VR
World Class experience with React Native — Michał Chudziak
I’ve shortly experimented with React Native so it was nice to listen Michał Chudziak’s talk how to set up a friendly React Native development environment with the best DX, spot bugs in early stage and deliver continuous builds to QA. Again Redux was dropped in favour of apollo-link-state.
Work close to your team – Napoleon Hill
What makes a good Developer eXperience?
stability
function
clarity
easiness
GraphQL was mentioned to be the holy grail of frontend development and perfect with React Native. Tools for better developer experience: Haul, CircleCI, Fastlane, ESLint, Flow, Jest, Danger, Detox. Other tips were i.a to use native IDEs (XCode, Android Studio) as it helps debugging. XCode Instruments helps debug performance (check iTunes for video) and there’s also Android Profiler.
World Class experience with React Native
React Finland App – Lessons learned — Toni Ristola
Every conference has to have an app and React Finland of course did a React Native app. Toni Ristola lightning talked about lessons learned. Technologies used with React Native was Ignite, GraphQL and Apollo Client ? App’s source code is available on GitHub.
Lessons learned:
Have a designer in the team
Reserve enough time — doing and testing a good app takes time
Test with enough devices — publish alpha early
React Finland App – Lessons learned
React Native Ignite — Gant Laborde
80% of mobile app development is the same old song which can be cut short with Ignite CLI. Using Ignite, you can jump into React Native development with a popular combination of technologies, OR brew your own. Gant Laborde talked about the new Bowser version which makes things even better with Storybook, Typescript, Solidarity, mobx-state-tree and lint-staged. Slides can be found on the Internet.
Ignite
How to use React, webpack and other buzzwords if there is no need — Varya Stepanova
Varya Stepanova’s lightning talk suggested to start a side-project other than ToDo app to study new development approaches and showed what it can be in React. The example was how to generate a multilingual static website using Metalsmith, React and other modern technologies and tools which she uses to build her personal blog. Slides can be found on the Internet.
Doing meaningful side-projects is a great idea to study new things and I’ve used that for i.a. learning Swift with Highkara newsreader, did couple of apps for Sailfish OS and played with GraphQL and microservices while developing app with largish vehicle dataset.
Two days full of talks of React, React Native, React VR and all the things that go with developing web applications with them was great experience. Days were packed with great talks, new information and everything went smoothly. The conference was nicely organized, food was good and participants got soft hoodies to go with the Allas Sea Pool ticket. The talks were all great but especially “World Class experience with React Native” and “React Native Ignite” gave new inspiration to write some app. Also “ReactVR” seemed interesting although I think Augmented Reality will be bigger thing than Virtual Reality. It was nice to hear from “The New Best Practices” talk that there really is no new best practices as the old ones still work. Just use them!
Something to try and even to take into production will be Immer, styled components and Next.js. One thing which is easy to implement is to start using lint-staged although we are linting all the things already.
One of the conference organizers and speaker, Juho Vepsäläinen, wrote Lessons Learned from the conference and many of the points he mentions are to the point. The food was nice but “there wasn’t anything substantial for the afternoon break”. There wasn’t anything to eat after lunch but luckily I had own snacks. Vepsäläinen also mentions that “there was sometimes too much time between the presentations” but I think the longer breaks between some presentations were nice for having a quick stroll outside and have some fresh air. The venue was quite warm and the air wasn’t so good in the afternoon.
The Afterparty at Sea Life Helsinki was interesting choice and it worked nicely although there wasn’t so many people there. The aquarium was fishy experience and provided also some other content than refreshments. Too bad I hadn’t have time to go and check the Allas Sea Pool which we got a free ticket. Maybe next time.
Thanks to the conference crew for such a good event and of course to my fellow Goforeans which attended it and had a great time!
