Chronicles of a Web Developer: An Unexpected Journey to the Land of IoT

What if your production line informed you, that undefined is not a function? Oops! Industrial settings such as factories are nevertheless the places where IoT is currently booming, and if you really want to make an impact, that’s where you want to be.

Jouni is a web developer, who was tasked to write a web UI for an old-school industrial product. Little did he know that the 3 years working on this would completely change his understanding of how adaptable a modern web technology stack really is, and how far you can push the boundaries of it.

In this talk you will learn what Jouni discovered about approaching large-scale IoT installations in practise, dealing with massive amounts of data and designing fully reactive systems. You will also hear why web technologies will rule the world of IoT, and why web developers will be the ones finally delivering actual value from it.

Transcript

1. An Unexpected Journey to the Land of IoT Chronicles of a Web Developer_ Jouni Kaplas / Photo by Amy Skyer on Unsplash
2. @kaplas & “Let’s put the cat on the table” 0 LOC No surprise announcement of yet-another-JS-library Some business gibberish about IoT (aka. context) Experiences in developing an Industrial IoT product And a whole new meaning and direction for your life and your career Photo by Borna Bevanda on Unsplash
3. Jouni Kaplas_ Head of Technology (FI)
 Technical Architect
 Web Specialist kaplas.net
 twitter.com/kaplas
 github.com/kaplas
 linkedin.com/in/kaplas jouni.kaplas@futurice.com
4. Photo by Laura Vanzo on Visit Tampere Oy photo bank Tampere,
 Finland
5. This is IoT in 2017
6. This is IoT in 2017
7. Industrial Internet of Things IIoT incorporates machine learning and big data technology, harnessing the sensor data, machine-to-machine (M2M) communication and automation technologies that have existed in industrial settings for years. The driving philosophy behind the IIoT is that smart machines are better than humans at accurately, consistently capturing and communicating data. Source: http://internetofthingsagenda.techtarget.com/definition/ Industrial-Internet-of-Things-IIoT @kaplas &
8. “...have existed in industrial settings for years...” @kaplas &
9. Industrial IoT examples @kaplas &
10. Solution for monitoring, analysing and managing a fleet of landfill compaction vehicles and other waste management devices. Tana Smart Site_ @kaplas &
11. Elenia power grid construction and monitoring_ @kaplas & Situational awareness tool for Elenia personnel, and field tools for their contractors.
12. Photo: Virpi Vaittinen 2017 Futurice & Fortum:
 Combining digital with solar @kaplas & Solution that provides easier access to electricity for people in developing countries.
13. Aidon Service Vision Sprint_ @kaplas & We helped the Finnish smart meter manufacturer to develop new service offering.
14. Unnamed client:
 Confidential IIoT project @kaplas & Industrial software platform and IoT service R&D.
 The coolest thing on this planet. And I can not tell anything about it.
15. But what do all of these projects have in common? @kaplas &
16. All of those are new kind of services made possible by web technology @kaplas &
17. @kaplas & LAYER 1: Sensors LAYER 2: Network LAYER 3: Storage LAYER 4: Analytics LAYER 5: Application LAYER 6: Digital service BUSINESS INFORMATION DATA Customer value Platform Security Source: Jari Collin, Ari Saarelainen: Teollinen internet (~Industrial internet), Talentum, Helsinki, 2016
18. New kind of services made possible by web technology @kaplas &
19. @kaplas & “Revolutionary” service aspects Connectivity Discoverability Realtime access to data Client hardware independence Remote calculation capabilities Quicker deployment cycles Lightweight deployments Easier updates Photo by Borna Bevanda on Unsplash You want to use
 the web!
20. So what is it like to develop an IIoT service with web tech stack? @kaplas &
21. “I don’t think you can do this with a browser...” “Here it is. It took me 2 hours.” @kaplas &
22. Life spans of products are really long How do future-proof your JavaScript application to withstand a life span of 15 years? Photo by Eric Rothermel on Unsplash @kaplas &
23. You will become a domain expert You’ve always wanted to know everything about tractors, right? Truth to be told,
 it may help you on your career Photo by Gozha Net on Unsplash @kaplas &
24. Data is everywhere Data is the main part of any IIoT service. Sometimes it’s about the amount of data Sometimes it’s about having a history Sometimes it’s about query capabilities Sometimes it’s about calculation speed @kaplas & Photo by Markus Spiske on Unsplash
25. Fully reactive from the get-go Because data is the main ingredient of IIoT services, you will find yourself manipulating that over and over again, and displaying it in different forms in the UI. Reactive approach will help you to implement all this. @kaplas & Photo by Braden Collum on Unsplash
26. Fully realtime from the get-go Photo by Braden Collum on Unsplash @kaplas & Data means money for these companies. Only right information at the right time means profits.
27. If you will remember just one thing
 from this presentation, let it be this one: Make your applications
 realtime from the day one @kaplas &
28. Configuration points A lot of industrial software products are created as configurable installations. This means less hardcoded parts and more plugin patterns and reacting to runtime configuration. @kaplas & Photo by Mikael Kristenson on Unsplash
29. Learn how to write performant JavaScript code Photo by Mikael Kristenson on Unsplash Don’t create unnecessary objects Avoid pitfalls with closures Use prototypes Pass context objects when possible Learn what V8 hidden classes are and how those work ...and so on @kaplas &
30. Learn to love caching of values Photo by Mikael Kristenson on Unsplash Making 1 unnecessary calculation doesn’t make a difference Making 100000 unnecessary calculations start to matter Use cached selectors (eg. with redux), observables, etc. @kaplas &
31. And when your code sucks,
 learn to debug it An industrial UI might be running 24/7 for weeks without restarting. Suddenly memory leaks really become a problem. Learn to use memory profiler, and try to detect even the smallest of leaks. If you are dealing with lots of data, you will also process it quite a much, and you will have lots of DOM nodes to display that. Learn to use the CPU profiler, love the flame chart view, use named functions, and try to find all the unnecessary steps you can get rid of. @kaplas &
32. Photo from Google Chrome development tools documentation @kaplas & Profilers will become your new best friends
33. UX paradigms might be strange Not everything works like in consumer apps @kaplas &
34. Example: “UI shall never show false values” On Turn off Turn on Off @kaplas &
35. Optimistic update? UI Motor “UI shall never show false values” Turn on Off Stopped ✓ On Turn off Starting ❌ On Turn off Running ✓ Turn on Off Stopping ❌ Turn on Off Stopped ✓ @kaplas &
36. Turn on Off Starting ❌ Pessimistic update? UI Motor “UI shall never show false values” Turn on Off Stopped ✓ On Turn off Stopping ❌ On Turn off Running ✓ Turn on Off Stopped ✓ @kaplas &
37. Starting Turn off Starting ✓ Nope – Add intermediate states UI Motor “UI shall never show false values” Turn on Off Stopped ✓ Turn on Stopping Stopping ✓ On Turn off Running ✓ Turn on Off Stopped ✓ @kaplas &
38. @kaplas & You might not have
 an internet connection
39. @kaplas & How do you npm install anything?
40. @kaplas & How do you update anything?
41. @kaplas & Where is your backend?
42. @kaplas & How do you actually host anything?
43. @kaplas & Don’t worry. We can do on-premise installations
44. @kaplas & Don’t worry. We can have servers & virtual servers
45. @kaplas & Don’t worry. We can have a local npm registry
46. @kaplas & Don’t worry. We can dockerize everything
47. You know technologies which are adaptable to multiple difficult and
 non-conventional situations. You just haven’t thought about it before. @kaplas &
48. Microservices make wonders Photo by ian dooley on Unsplash In an environment where business requirements change, development times are long and almost anything needs to be configurable, dividing codebase into smaller parts works really well. @kaplas &
49. Example: “First view needs to load in 1 sec” Dev & build time Runtime Tooling Bundles assets Backend Serves bundle Browser Executes bundle @kaplas &
50. 1st step:
 Improve efficiency Dev & build time Runtime Tooling Production builds. No accidental source maps, etc. Backend Gzip everything.
 Check file sizes of assets Browser Extra requests? Bugs? @kaplas &
51. 2nd step:
 Bundle splitting Dev & build time Runtime Tooling Define bundle borders and triggers Backend Serve requested assets Browser Request more JS files when triggered @kaplas &
52. Problem Dev & build time Runtime Tooling Define bundle borders and triggers Backend Serve requested assets Browser Request more JS files when triggered This is based on assumptions @kaplas &
53. Problem Dev & build time Runtime Tooling Define bundle borders and triggers “In this installation it is required to show view X to user first, instead of the default main view” @kaplas &
54. Problem Dev & build time Runtime Tooling Define bundle borders and triggers “In this installation there is a special user role called boss, which is only interested in the financial performance screen” @kaplas &
55. “This was a total surprise for us, but it seems that users are only using 10% of all the features that we implemented.” Problem Dev & build time Runtime Tooling Define bundle borders and triggers @kaplas &
56. 3rd step:
 Move bundle splitting to runtime Dev & build time Runtime Tooling Define bundle borders Webapp backend Make customized bundles. Cache those to backend. Browser Request more JS files when triggered Bundling microservice Configuration Serve requested assets
57. 4th step:
 Define bundles based on user Dev & build time Runtime Tooling Define bundle borders Webapp backend Make customized bundles. Cache those to backend. Browser Request more JS files. Inform about user actions. Bundling microservice Serve requested assets Analytics microservice
58. So now, what next? @kaplas &
59. @kaplas & Recap: Why Industrial IoT? Photo by Mike Kenneally on Unsplash Interesting problems Interesting companies Possibilities to define entire future
 direction for companies Desperate need for your skills
60. @kaplas & How to start working with IIoT? Photo by Mike Kenneally on Unsplash Apply to an industrial company an agency working with IIoT Or join industrial hackathons innovation platforms & programs research projects Or found a startup
61. @kaplas & Photo by Mike Kenneally on Unsplash It’s dangerous to go alone! Take these
 with you:
62. IoT Service Kit The IoT Service Kit is a board game that brings domain experts out of their silos to co-create user-centric IoT experiences. Creative Commons Attribution 4.0 International License iotservicekit.com
63. Creative Commons Attribution-ShareAlike 4.0 International License
64. spiceprogram.org & chilicorn.org
65. That’s it.
 Thank You! Chronicles of a Web Developer:
 An Unexpected Journey to the Land of IoT Jouni Kaplas kaplas.net
 twitter.com/kaplas
 github.com/kaplas
 linkedin.com/in/kaplas jouni.kaplas@futurice.com Photo by Amy Skyer on Unsplash