Notes from OWASP Helsinki chapter meeting 35: Bug Bounty programs

Have you ever wondered how to become a bug bounty hunter or wanted to organize a bug bounty program? OWASP Helsinki chapter meeting number 35 told all about bug bounty programs from hacker and organizer point of views. The event was held 6.11.2018 at Second Nature Security (2NS) premises in Keilaniemi. Here’s my short notes.

Notes from OWASP Helsinki chapter meeting #35

“Hunting for bounties in a web browser” by Juho Nurminen from 2NS started the event talks and told about how to approach the issue and showed some findings in details. For the usual of understanding the technology and focusing on what you know, it’s beneficial to read up prior art. Is it repeatable bug? Reproduce it in other context. The talk presented cve-2018-6033 (extension code can execute downloaded files), cve-2018-6039 (XSS in DevTools, privileged API can be overwritten) and cve-2011-2800 (data leak across origins). tl;dr; pwn things, submit crbug.com, profit.

“#OWASPHelsinki 35 started by @jupenur hunting bounties in web browsers. Understand the tech (web, js, extensions, plugin API, devtools, NaCI, WebAssembly, etc.). Focus on what you know. Read up prior art. Nice examples of bugs found. @OWASPHelsinki meetup hosted by @2NS_fi.” – @walokra

Why web browsers?
Why web browsers?

CVE-2018-6033
CVE-2018-6033

In “How to become a bug bounty hunter” Iiro Uusitalo from Solita talked about bug bounty platforms and tips to be succesful. In short: POC or GTFO, recon, stay on scope, automate all the things, focus, report, wait, profit, join the community.

“How to become a bug bounty hunter, told by @iiuusit at @OWASPHelsinki meetup. Tips: poc or gtfo, recon, stay on scope, automate all the things, focus, report, wait, profit, join the community. #OWASPHelsinki” – @walokra

Bug bounty programs in Finland
Bug bounty programs in Finland

Tips for recon
Tips for recon
How to report
How to report

tl;dr;
tl;dr;

“Running a successful bug bounty program” by Thomas Malmberg from Hackrfi bug bounty program covered the topic from the “random dude from the other side of the table” point of view. “What really matters is finding bugs” but there’s a lot of things to manage. It comes to managing expectations of hackers and program owners. And remembering that hackers work for you (program owners) but they are not your employees.

Expectation management
Expectation management

“What really matters is finding bugs.” @tsmalmbe from @hackrfi told how to run a successful bug bounty program at @OWASPHelsinki meetup. Managing expectations of hackers and program owners. Remember: hackers work for you; hackers are not your employees. #OWASPHelsinki” – @walokra

The evening ended with a panel & discussion about bug bounty with Juho, Iiro and Thomas. There was lots of interesting questions asked and here’s some of them in short.

  • Hardware bug bounties, how to do if device not publicly available?
    • On premises hack days -> not so successful, too little time, concentrate on low hanging fruits.
  • How to choose [bug bounty] program?
    • Wide scope -> low hanging fruits.
  • What kind of reports of findings
    • OWASP Top 10 covers almost everything.
    • Everyone is scared of finding remote code execution.
    • Business impact findings.
    • Recon: who we are, what we do -> what has big business impact. Also where’s the legacy code?
  • Impact of how hacker and product owner sees findings? Owner will set the impact, how it should happen at both ends? how to define the final impact corresponding the value?
    • Always estimate, run some CVSS estimator.
    • Use Google’s approach.
    • Fairness and trust. Programs task is to create trust.
  • Awfraid of reporting found bugs when there’s no bug bounty program?
    • Program has rules which covers legal matters. Read the rules, ask.
  • Top 3 negative things?
    • Program runner went public, lots of bugs, hackers pwned whole system.
    • Communication issues.
    • Program runner: call on Friday night, database lost. bug bounty program to blame.
  • Bug bounty programs role, client and customer: public programs. -> ncss, cert-fi.
  • Pentesting vs. bug bounty?
    • Not competing.
    • You shouldn’t do bug bounty if you don’t have enough security maturity. Too many reports at start (duplicates, cost much, etc.), then nothing if you don’t pay.
    • Low hanging fruits are not interesting for good hackers
    • Pentesting last 30 days and result is report covering certain things.
    • Bug bounty concentrates on specific aspect.
  • Bug bounty and threat model? When program open, easier for black market to find vulnerabilities?
    • Threat model for users? Depends on product / service you are providing.
    • 0-day on some Finnish site selling on USA black market -> not much interest.
    • Pentesting should be done first.
  • How to improve process?
    • Educating the bottom of the pyramid. Hammer and nails.
    • Public programs generate lots of noice vs. private
  • Bug bounty in 5 years?
    • More automated things, scripts to detectivive things, AI
    • Bug hunter side: more professional all around the pyramid, more spam

Notes from GraphQL Finland 2018

GraphQL Finland 2018 conference was held last week (18-19.10.2018) at Paasitorni and the first of its kind event in Finland brought a day of workshops and a day of talks around GraphQL. The event was organized by the same people as React Finland and it showed, in good ways. The talks were interesting, venue was appropriate, atmosphere was cosy and after party was bookie. Here’s my notes from the event.

All of the talks were live streamed and they’re available on Youtube. I was lucky to get a ticket to the event and be able to enjoy the talks live. In overall most of talks were easy to comprehend although I only had some experience with GraphQL through experiments and what I had learnt couple of months ago at React Finland 2018 conference (my notes from day 1 and day 2).

“GraphQL is an open source data query and manipulation language, and a runtime for fulfilling queries with existing data. It was developed internally by Facebook in 2012 before being publicly released in 2015. It provides a more efficient, powerful and flexible alternative to REST and ad-hoc web service architectures. It allows clients to define the structure of the data required, and exactly the same structure of the data is returned from the server, therefore preventing excessively large amounts of data from being returned. – Wikipedia

Read also the organizer’s summary of the event and check out the photos.

Life is hard, GraphQL is easy
Life is hard, GraphQL is easy

Notes from the talks

(titles are links on Youtube to particular talk)

Adopting GraphQL in Large Codebases – Adam Miskiewicz
The event started with Adam Miskiewicz’s story from Airbnb and incrementally adopting GraphQL. It’s simple to start using GraphQL in your project but adding it incrementally and carefully in huge codebases powering large distributed systems is not quite as straightforward. The talk dived into how Airbnb is tackling this challenge, what they’ve learned so far, and how they plan to continue evolving their GraphQL infrastructure in the future. Towards GraphQL Native!

Going offline first with GraphQL — Kadi Kraman
Kadi Kraman from Formidable Labs talked about going offline first with GraphQL. She did a nice interactive demo with React Native and Apollo 2. Users expect your mobile app to work offline and the tooling in GraphQL makes it reasonably straightforward to get your React Native app working offline. Slides

“Do this as you go and offline comes almost as a side-effect”

Life is hard and so is learning GraphQL — Carolyn Stransky
Life is hard, without documentation. Carolyn Stransky presented her story of ups and downs when learning GraphQL and documentation’s role in it. The problem with GraphQL is that – because there’s no “vanilla” GraphQL – there’s no central hub for all of the information and tooling necessary to learn. It’s underutilized and scattered throughout our community. The talk touched on how to better enable GraphQL docs for learning and comprehension and slides pointed to good resources.

Database-first GraphQL Development — Benjie Gillam
Benjie Gillam from PostGraphile teached how database-centric approach to GraphQL API development can give your engineers more time to focus on the important parts of your application. Adhere to GraphQL best practices, embrace the power of PostgreSQL, and avoid common pitfalls. Interesting slides.

graphql-php — Christoffer Niska
Christoffer Niska gave some good tips for software development: Don’t over-abstract, test everything, use static type checking, follow best practices, don’t prematurely optimize.

(Un)expected use of GraphQL — Helen Zhukova
(Un)expected use of GraphQL talk by Helen Zhukova showed the benefit of single code base on client and server side. Partly live coded with i.a. CodeSandbox. The any DB in this case was MongoDB.

Mysterious closing keynote — Dan Schafer
The mysterious closing keynote was Dan Schafer talking about GraphQL history, present and future. “Strive for single sources of truth”. Still lots of things to do in the ecosystem. Slides.

Talks from the deep end

Some of the GraphQL Finland talks were quite deep in the content and as most of the talks were around 15 minutes, the pace was quite demanding. At the event I concentrated on topics which seemed most relevant and saved the rest for later. The sponsor’s lounge by Gofore and Digia provided nice relaxing space to get your thoughts together. Here are the topics I saved for later.

All work no play
All work no play (photo: Juho Vepsäläinen)
Makes you a dull boy
Makes you a dull boy (photo: Juho Vepsäläinen)

Emerging uses of GraphQL for rapid application development — Ellie Day
Many schemas simply mirror their RESTful counterparts, limiting their overall usefulness. The talk covers emerging patterns that enable rapid GraphQL-powered application development.

Building efficient, waterfall-free GraphQL applications — Jimmy Jia
Jia showed how in larger projects it’s easy to run into situations where requests wait on each other regardless of using GraphQL, to the detriment of user experience. He explored how these problems arise, and looked at strategies for mitigating these problems.

Building tools for GraphQL — Glenn Reyes
Using the right tooling helps development and Reyes talked about what can we do to improve DX and supercharge our GraphQL development.

End-to-end type-safety with GraphQL — Johannes Schickling
Talk dived deep into one of the most powerful features of GraphQL – its type-system. GraphQL can be used to enable end-to-end type-safety across any language, making your application architecture more resilient and easier to evolve.

Real-time GraphQL with Event Sourcing — Andrew Rhyne
Thirty-thousand foot overview of event sourcing and how naturally it fits with GraphQL and subscriptions. And what it enables at Gatsby.

Hidden gems of GraphQL query — Ivan Goncharov
GraphQL has a few useful features that are typically overlooked. The talk contained spoilers from GraphQL Specification.

Reason and GraphQL — Nik Graf
Using Reason’s type inference you can create GraphQL servers with 100% type coverage. And Reason shines even more so on the client. Send one quick introspection request and you get full autocompletion on your schema right in the browser.

Writing a realtime GraphQL backend as a compiler in Haskell — Tanmai Gopal
The talk went over the key architectural decisions, programming constructs and the unforeseen implementation pitfalls Hasura ran into while building a high-performance GraphQL backend. It also covered tools from the Haskell ecosystem that made this possible.

Where art thou, my error? — Eloy Durán
Error metadata.

Afterwords

The last chance to practice your Finnish was the Afterparty 🎉 at Gofore office!

Notes from Red Hat Forum Finland 2018: Ideas worth exploring

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.”

Be courageous, be open and innovate in the open.

Keynote: Ideas worth exploring
Keynote: Ideas worth exploring (@walokra)

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
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
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
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.

Shift to the Cloud-First core
Shift to the Cloud-First core (@walokra)

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.

Hands-on: introduction to OpenShift
Hands-on: introduction to OpenShift (@walokra)

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
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.

Hands-on: Istio, resilient apps
Hands-on: Istio, resilient apps (@walokra

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.”

Monolith first
Martin Fowler: Monolith first

Red Hat OpenShift Application Runtimes product architecture showed the blocks in the OpenShift context.

Red Hat OpenShift Application Runtimes
Red Hat OpenShift Application Runtimes

Red Hat Application Migration and Modernization Program
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.

Red Hat OpenShift Pale Ale
Red Hat OpenShift Pale Ale

Notes from React Helsinki August 2018 meetup

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
When to use generator

Why build your own
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 parts

GraphQL adoption
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.

Some food & drinks
Some food & drinks

Smartly.io entrance with swings
Smartly.io entrance with swings

OWASP Helsinki chapter meeting 34: Secure API

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.

Best friends: API security & API management

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.

Snacks and beverages

Refreshments were basic and different

Two days of React Finland 2018: Day two with React and React Native

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.

ReactVR — Shay Keinan

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
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.

After party

Summary

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!

Two days of React Finland 2018: Day one topics of React

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. Here’s the first part of my notes from the talks which I posted to Twitter. Read also the second part with more of React Native.

React Finland 2018: Day 1

React Finland combined the Finnish React community with international flavor from Jani Eväkallio to Ken Wheeler and other leading talents of the community. The event was the first of its kind in Finland and consisted of a workshop day and two days of talks around the topic. It was nice that the event was single track so you didn’t need to choose between interesting talks.

At work I’ve been developing with React couple of years and tried my hands with React Native so the topics were familiar. The conference provided crafty new knowledge to learn from and maybe even put to production. Overall the conference was great experience and everything went smoothly. Nice work from the React Finland conference team! And of course thanks to Gofore which sponsored the conference and got me a ticket.

I tweeted my notes from almost every presentation and here’s a recap of the talks. I heard that the videos from the conference will be available shortly.

The New Best Practices — Jani Eväkallio

First day’s keynote was by Jani Eväkallio who talked about “The New Best Practices”. As the talk description wrote “When React was first introduced, it was ridiculed for going against established web development best practices as we knew them. Five years later, React is the gold standard for how we create user interfaces. Along the way, we’ve discovered a new set of tools, design patterns and programming techniques.”

The new best practices were:

  • Build big things from small things
  • Write code for humans first: flow, Typescript, storybook
  • Stay close to the language:
    • helps i.a. linters
  • Always prefer simplicity
  • Don’t break things:
    • Facebook makes React API changes easy to upgrade, depreciation well in advance, migration, documentation. it’s a flow, not versions. Use codemod.
  • Keep an open mind

You ask “what new best practices”? Yep, that’s the thing. We don’t need new best practices as the same concepts like Model-View-Controller and separation of concerns are still valid. We should use best practices which have been proved good before as they also work nicely with React philosophy. Eväkallio also talked why React will be around for a long time. It’s because components and interoperable components are an innovation primitive.

The New Best Practices

Declarative state and side effects — Christian Alfoni

After the keynote it was time to get more practical and Christian Alfoni talked about how we can get help writing our business logic in a declarative manner and see what benefits it gives us. He talked about lessons learned refactoring Codesandbox.io from Redux to Cerebral and about Cerebral which provides a declarative state and side effects management for popular JavaScript frameworks. Talks slides are available on the Internet.

Alfoni also pointed to Turning the database inside out with Apache Samza. Also that Cerebral had time travel before Dan Abramov presented Live React in his talk Hot Reloading with Time Travel at react-europe 2015

Immer: Immutability made easy — Michel Weststrate

Immutable data structures are a good thing and Michel Weststrate showed Immer which is a tiny package that allows you to work with immutable data structures with unprecedented ease. Managing the state of React app is a huge deal with Redux and any help is welcome. “Immer doesn’t require learning new data structures or update APIs, but instead creates a temporarily shadow tree which can be modified using the standard JavaScript APIs. The shadow tree will be used to generate your next immutable state tree.”

The talk showed how to write your reducers in a much more readable way, with half the code and without requiring additional large libraries. The talk slides are available on the Internet.

Get Rich Quick With React Context — Patrick Hund

“Get Rich Quick With React Context” lightning talk by Patrick Hund didn’t tell how good job opportunities you have when doing React But how with React 16.3 the context API has been completely revamped and demonstrated a good use case: Putting ad placements on your web page to get rich quick! Other use cases are localizations. Check out the slides which will tell you how easy it is to use context now and how to migrate your old context code to the new API.

There’s always a better way to handle localization — Eemeli Aro

“There’s always a better way to handle localization” lightning talk by Eemeli Aro told about how localization is a ridiculously difficult problem in the general case, but in the specific you can get away with really simple solutions, especially if you understand the compromises you’re making.

I must have been dozing as all I got was there are also other options to store localizations than JSON like YAML and JavaScript property format especially when dealing with non-developers like translators. The talk was quite general and on abstract level and mentioned solutions to localization were react-intl, react-i18next and react-message-context.

Styled Components, SSR, and Theming — Kasia Jastrzębska

Web applications need to be styled and Kasia Jastrzębska talked about CSS-in-JS with styled-components by going through the new API, performance improvements, server side rendering with Next.js. She also showed the theming manager available with v2 of styled-components. Talk slides are available on the Internet.

Takeaways from this talk was that CSS in React app can be written as you always have or by using CSS-in-JS solutions. There are several benefits of using styled-components but I’m still thinking how styles get scattered all over components.

Universal React Apps Using Next.js — Sia Karamalegos

53% of mobile site visits are abandoned if pages take longer than 3 seconds to load.
DoubleClick by Google, 2016

Every user’s hardware is different and processing speed can hinder user experience on client-side rendered React applications and so Sia Karamalegos talked how server-side rendering and code-splitting can drastically improve user experience. By minimizing the work that the client has to do. Performance and shipping your code matters. The talk showed how to easily build an universal React apps using the Next.js framework and walked through the concepts and code examples. Talk slides are available on the Internet.

There are lots of old (mobile) devices which especially benefit from Server Side Rendering. Next.js is a minimalistic framework for universal, server-rendered (or statically pre-rendered) React applications which enables faster page loads. Pages are server-rendered by default for initial load, you can enable prefetching future routes and there’s automatic code splitting. It’s also customizable so you can use own Babel and Webpack configurations and customize the server API with e.g. Express. And if you don’t want to use a server Next.js can also build static web apps that you can then host on Github pages or AWS S3.

Universal React apps using Next.js

State Management in React Apps with Apollo Client — Sara Vieira

Apollo Client was one of the most mentioned framework in the conference along with Reason ML and Sara Vieira gave energetic talk how to use it for state management in React Apps. If you haven’t come across Apollo Client it’s caching GraphQL client and helps you to manage data coming from the server. Virieira showed how to manage local state with apollo-link-state.

The talk was fast paced and I somewhat missed the why part but at least it’s easy to setup: yarn add apollo-boost graphql react-apollo. Have to see slides and demo later. Maybe the talk can be wrapped up to: “GQL all the things” and “I don’t like Redux” :D

State Management with Apollo

Detox: A year in. Building it, Testing with it — Rotem Mizrachi-Meidan

Detox testing framework for React Native talk by Rotem Mizrachi-Meidan was the other talk I dozed along. Mizrachi-Meidan talked what developing and using Detox in production has taught and how Detox works and what makes it deterministic. The talk showed how mobile apps could be tested. There’s a video of earlier talk on the Internet.

Detox

Make linting great again! — Andrey Okonetchnikov

One thing in software development which always gets developers to argue over stupid things is code formatting and linting. Andrey Okonetchnikov talked how “with a wrong workflow linting can be really a pain and will slow you and your team down but with a proper setup it can save you hours of manual work reformatting the code and reducing the code-review overhead.”

The talk was a quick introduction how 🚫💩 lint-staged a node.js library can improve developer experience. Small tool coupled with tools that analyze and improve the code like ESLint, Stylelint, Prettier and Jest can make a big difference.

Missed talks

There was also two talks I missed: “Understanding the differences is accepting” by Sven Sauleau and “Why I YAML” by Eemeli Aro. Sauleau showed “interesting” twists of Javascript language.

Read also the second part with more of React Native.

Notes from OWASP Helsinki chapter meeting #31

What is DevSec, how to use Docker securely, why developers leak credentials? All those questions were answered at OWASP Helsinki chapter meeting #31 which was held 13.6.2017 at Solita premises. Here’s my short notes from the event. I’ll add links to presentations when they’re available.

DevSec – Developers are the key to security

DevSec is a emerging trend to move developers closer to security experts, akin to DevOps. Antti Virtanen from Solita talked about DevSec and how they do it (slides, pdf). As talk’s title tells us developers are the key but often buying one cybersolution is easier (giving out money) than peoples’ time. But if we look at the return of investment, passive defense is more effective.

Value for life?
Challenges in DevSec
Issues with DevSec
Recipe works!

Docker Security

Docker is currently experiencing very high adoption rate and people are deploying on Docker without considering the security landscape. Mika Vatanen from Digia told us about Docker Security (slides, pdf), possible attack vectors, how Docker handles security and what recommendations we should use when using it.

Possible attack vectors
How Docker handle security

Docker image tech recommendations
Docker image: tech recommendations
Docker image: policy recommandations
Docker runtime
Host and engine recommendations
AppArmor and seccomp
Seccomp
Seccomp

Leaking credentials – a security malpractice more common than expected

Bogdan Mihaila from Synopsys talked about Protecode and research of leaked credentials (slides, pdf).

Why credentials are leaked
Keys that got public
Mitigation
Conclusion: raise awareness

Upcoming: DevSecOps “mini-hackathon”

Last topic was introduction to upcoming “mini-hackathon” by Pekka Sillanpää from OWASP Helsinki. They are planning a hands-on event in August for familiarizing and investigating some nice open source tools, including: OWASP Dependency-Check, ZAP Proxy, OWASP DefectDojo, DevSec hardening framework and Clair. See more info from OWASP Helsinki page.

Nebula Tech Thursday – Beer & DevOps 2.3.2017

Agile software development to the cloud can be nowadays seen more as a rule than exception and that’s also what this year’s first Nebula Tech Thursday’s topics were about. The event was held 2.3.2017 at Woolshed Bar & Kitchen alongside good food and beer.

The event consisted of talks about “Building a Full Devops Pipeline with Open Source Tools” by Oleg Mironov from Eficode and “Cloud Analytics – Providing Insight on Application Health and Performance” by Markus Vuorinen & Jarkko Stråhle from Nebula. The presentations were a bit high level and directed more to the business level people than developers but there was some new information how different tools were used in practice.

Overall it was nice event to hear how things can be done and to talk with people. Here’s my short notes from the event.

Nebula Tech Day

Cloud Analytics – Providing Insight on Application Health and Performance

Markus Vuorinen & Jarkko Stråhle from Nebula talked about how to gather data to Elasticsearch, make it accessible and visualize it with Kibana and make actions based on that. The ELK-stack (Elasticsearch – Logstash – Kibana) is commonly used and the presentation showed nicely how to utilize it with cloud.

Technical setup
Technical setup
Data flow to Elastic
Data flow to Elastic
To visualization and alerts
To visualization and alerts
Kibana main view
Kibana main view
Kibana and response times
Kibana and response times

Building a Full Devops Pipeline with Open Source Tools

Oleg Mironov from Eficode showed the building blocks of how to build a Devops pipeline with Open Source Tools and demoed it. Nothing really special if you don’t count Rancher and Cattle. Just put your code to Git, use Ansible, run Jenkins jobs, build docker images, use RobotFramework for testing, push artifacts to Artifactory and deploy with Rancher.

Rancher overview
Rancher overview
DevOps Pipeline
DevOps Pipeline

DevOps Finland Meetup goes Mobile at Zalando

Development and operations, DevOps, is in my opinion essential for getting things done with timely manner and it’s always good to hear how others are doing it by attending meetups. This time DevOps Finland went Mobile and we heard nice presentations about continuous delivery for mobile applications, mobile testing with Appium and the Robot Framework and efficient mobile development cycle. Compared to developing Web applications mobile brings some extra hurdles to jump but nothing that’s not solvable. Here are my short notes about the meetup.

The meetup was hosted by Zalando Technology at their new office here in Helsinki. Zalando is known to many as that online store that sells shoes, clothing and other fashion items but things don’t sell themselves and behind the scenes they have lots of technologies to keep things running. For the record I think they said that the meetup had 65 attendees of the 100.

Also if mobile is your thing there’s a new Meetup group for mobile developers in Finland which was announced at the meetup. They’re also on Twitter and Facebook.

Continuous Delivery for Mobile Applications

Rami Rantala from Zalando talked about “Continuous Delivery for Mobile Applications” and how they’re managing releases of their Fleek app which is available for Android and iOS in German markets.

They didn’t arrive to the final setup straightforward and it was iterative approach with how Git is used, code merged and releases done. Using Fastlane for all tedious tasks, like generating screenshots, dealing with code signing, and releasing your application made automating things easier. Interesting note was that their build server slaves are ansible managed Mac Minis on Rami’s desk. They had solved the problems nicely but testing is still difficult.

DevOps and rollbacks don’t work together, you roll forward.

Mobile testing with Appium and the Robot Framework

Mobile testing can be done with different tools and one option is to use Robot Framework just like for Web applications. Elmeri Poikolainen from Eficode demoed how to use Appium and run Robot Framework tests on real device. It has some limitations and I think with native applications it could be better to use native test tools like what Xcode has to offer.

Efficient Mobile Development Cycle

The last and most fast-paced talk was by Jerry Jalava from Qvik about “Efficient Mobile Development Cycle“. He talked about different practices and tools in the development cycle and it was nice overview to the complexity of the process from design to done. You can for example run remote preview with 27 devices.