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.

Planning for Fujitsu Forum 2014: Human Centric Innovation

In late November it’s again time for business- and IT decision-makers, experts, project managers, IT architects, consultants and bloggers to travel to Munich, Germany to visit Fujitsu’s largest IT-event in Europe: Fujitsu Forum 2014. This year the event is held 19th and 20th November at the ICM in Munich and there will probably be over 10,000 attendees around the world getting insights and looking for strategic and operative ways to modernize and develop their own IT or the IT landscapes of their customers. Last year I was one of the bloggers invited by Fujitsu to visit Fujitsu Forum 2013 and it was an insightful experience.

The motto of the Fujitsu Forum 2014 is “Human Centric Innovation which expresses focus on a safe and prosperous future through innovations in information and communication technology. The event description tells us that these ICT innovations strongly support enterprises, public organizations and individuals in creating wealth and value. In overall Fujitsu Forum is a good place to find innovations that reduce costs and risks as well as increase agility and improve efficiency. Big and important words but what does it mean in practice? The event overview with summary about keynotes and breakout sessions gives you some idea about the different topics covered so let’s take a short look at the events I would select to attend.

There are a lot of simultaneous events so to make it easier to organize the events of your choice there’s an excellent schedule builder. The presentations in in the list of Keynotes and Breakout sessions are divided in three conference tracks: “Human Empowerment”, “Connected Infrastructure”, “Creative Intelligence”. The topics cover themes like how to design the future, workplace of 2020, tablet meets notebook, digital transformation, wearable technologies, Internet of Things and connected vehicles. Overall I selected 14 sessions to my agenda but pruned it to three keynotes and five breakout sessions as you don’t have time for every interesting topic.

From Fujitsu Forum 2013: Keynote
From Fujitsu Forum 2013: Breakout session

Keynote: Human Centric Innovation & how to design the future by Tango Matsumoto and Brian Johnson (Intel), 19 November, 11:00, Auditorium

“How value can be generated for your business and for our society by the new Human Centric Innovation approach. Matsumoto will explain how Fujitsu contributes to business growth and the resolution of social challenges which will set the scene for all the subsequent presentations.”

“What kind of future do you want to live in? What are you excited about and what concerns you? What is your request of the future? Brian Johnson answers these questions and more with The Tomorrow Project, a fascinating initiative to investigate not only the future of computing but also the broader implications on our lives and planet.”

Workplace Anywhere – Increasing enterprise productivity by David Rosewell, Simon Gray and Thomas Zell, 19 November, 13:00, Room 13b

“Organizations are mobilizing the enterprise to deliver both increased productivity and cost savings. They seek to empower and enable their people to get the job done and look to embrace more flexible working practices to maximize productivity. We will guide you through the options and a vision for the 2020 workplace to identify your ideal workplace strategy.”

Keynote: Fujitsu and its customers by Jürgen Walter, 19 November, 14:00, Auditorium

“Human Centric Innovation is for a world where technology complements all of our lives. A place where information continually delivers knowledge and innovation thrives. How does Fujitsu implement this vision and how do customers benefit from it? Jürgen Walter will address these questions, depicting some remarkable customer examples.”

Fujitsu Laboratories Group’s R&D vision and key initiatives by Hideyuki Saso, 19 November, 15:00, Room 13b

“Fujitsu Laboratories’ R&D vision, highlighting key activities, under a mission to conduct R&D from a mid to long-term perspective, to generate new business models and discover new markets to drive Fujitsu’s business. We backcast future markets, products and services, engaging in trend-conscious R&D of: platform/applied/verification technologies, ubiquitous computing domain human interfaces and devices, data-leveraging domain knowledge platforms and cybersecurity, ICT platform domain computing and networking, software-supporting product development and manufacturing, and electronic devices. By interlinking such technologies, we aim to drive global business.”

Keynote: Digital Transformation & Fujitsu in Society by Joseph Reger and Duncan Tait, 20 November, 10:00, Auditorium

“As the Internet and other information and communication technologies penetrate all areas and aspects of life, business and infrastructure, a hyper-connected world is created. Digital and analog businesses, processes and, indeed, worlds converge on the basis of ICT technologies. Innovation accelerates, new value propositions and new businesses are created, existing businesses fundamentally transformed. What this development means, what technologies it requires and will create and how to not just cope with it but how to make good use of it, is the subject of the presentation.”

“Fujitsu uses the power of technology to contribute to the development of sustainable societies around the world. Working with both businesses and governments, in fields as diverse as energy, transportation, food, health, the environment, and education, Fujitsu’s ICT can drive social innovation and generate solutions. Duncan will present highlights from this area of Fujitsu’s activities and show that the company’s vision of a Human Centric Intelligent Society is already becoming a reality.”

The human-centric workplace: Joy and efficiency got married by Christian Bock, Markus Seifart and Jeffrey Shomper, 20 November, 12:00, Room 13b,

“A successful workplace IT strategy is all about people. Generation Y and BYOD drive a new understanding of workplace IT, one that puts the user at the center and embraces individuality. Progressive companies realize that this new thinking boosts both productivity and employee satisfaction. Fujitsu shares best practices that empower users to achieve their full potential.”

Wearable technologies for human empowerment by Naoyuki Sawazaki, 20 November, 13:00, Room 12

“Although various types of wearable devices such as eyeglasses, watches and other gadgets for health and fitness are gaining more attention in consumer markets, the true potential of wearable technologies lies in enterprise or business use. Because they enable users to get ICT support in a hands-free manner, they offer a clear advantage especially for workers in factory or building maintenance and other onsite operations to make their work more efficient, with fewer errors and oversights, even when they are not experts. In this session, current trends of wearable technologies are briefly reviewed, and then, research activities in Fujitsu Laboratories including the newly developed glove-style wearable device are introduced.”

Exploiting IoT & Hyperconnectivity – A Life & Death Example by Joseph Reger and Antonio Jara, 20 November, 15:00, Room 13b

“The Internet of Things promises to create huge new opportunities in business and society. In this session we demonstrate the use of Fujitsu RunMyProcess to connect wearables, mobiles, cloud software and physical sensors in order to show how time saved through hyperconnectivity could literally mean the difference between life and death for a critically injured cyclist.”

And of course there’s a comprehensive exhibition of products and solutions which reveals e.g. how data center and client landscapes can be improved through innovation initiatives. Though this year I’m not sure what to expect and look forward to regarding Fujitsu’s Ultrabooks and tablets. Anyways the exhibition offered by Fujitsu and its partners has always been interesting. Last year we got i.a. hands-on with U904 and T904 Ultrabooks and tested the 360 degree video conferences and collaboration setup.

From Fujitsu Forum 2013: Intelligent desk
From Fujitsu Forum 2013: 360 degree video conferences

We all love technical topics and talks but there’s time also for refreshments and entertainment. On Wednesday evening there’s an opportunity to enjoy Oktoberfest themed evening event. It’s a nice entertainment and networking opportunity with drinks and special Bavarian dishes. Last year there was crispy roast chicken (Hendl), spiced strips of pork belly (Hüttenspeck), bread and dripping (Schmalzbrot), chive bread, savory cheese spread with pretzels (Obatzda und Brezn). Hmmm, and now I’m again hungry :)

Fujitsu Forum with keynotes, breakout sessions and exhibition looks interesting and also this year I’m one of the Fujitsu Digital Influencer program’s bloggers invited to visit Fujitsu Forum 2014. It will be exciting to see the latest technology trends and other bloggers and Master your Business campaign team. In other news I’m again taking part in Fujitsu’s Master Your Business campaign which starts on November 6th. The campaign will be fun as I just got the device I’m testing and it’s pretty sweet.

Until then, read about my insights from last year’s Fujitsu Forum 2013 where I was invited by Fujitsu and follow me on Twitter (@walokra) for technology insights and maybe we will see on 18th and 20th November at the ICM in Munich.