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

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.

E6cd4de769537b3b4a6a954b5ef62cea?s=128

Jouni Kaplas

July 13, 2017
Tweet

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