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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

4. Photo by Laura Vanzo on Visit Tampere Oy photo bank
   Tampere,

   Finland
   

   View Slide

5. This is
   IoT in 2017
   

   View Slide

6. This is
   IoT in 2017
   

   View Slide

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 &
   

   View Slide

8. “...have existed in industrial settings for years...”
   @kaplas &
   

   View Slide

9. Industrial IoT examples
   @kaplas &
   

   View Slide

10. Solution for monitoring, analysing and
    managing a fleet of landfill
    compaction vehicles and other waste
    management devices.
    Tana Smart Site_
    @kaplas &
    

    View Slide

11. Elenia power grid
    construction and monitoring_
    @kaplas &
    Situational awareness tool for Elenia
    personnel, and field tools for their
    contractors.
    

    View Slide

12. Photo: Virpi Vaittinen 2017
    Futurice & Fortum:

    Combining digital with solar
    @kaplas &
    Solution that provides easier access
    to electricity for people in developing
    countries.
    

    View Slide

13. Aidon Service Vision
    Sprint_
    @kaplas &
    We helped the Finnish smart meter
    manufacturer to develop new service
    offering.
    

    View Slide

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.
    

    View Slide

15. But what do all of these projects have in common?
    @kaplas &
    

    View Slide

16. All of those are new kind of services
    made possible by web technology
    @kaplas &
    

    View Slide

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
    

    View Slide

18. New kind of services
    made possible by web technology
    @kaplas &
    

    View Slide

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!
    

    View Slide

20. So what is it like to develop an IIoT
    service with web tech stack?
    @kaplas &
    

    View Slide

21. “I don’t think you can do this with a browser...”
    “Here it is. It took me 2 hours.”
    @kaplas &
    

    View Slide

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 &
    

    View Slide

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 &
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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 &
    

    View Slide

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
    

    View Slide

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 &
    

    View Slide

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 &
    

    View Slide

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 &
    

    View Slide

32. Photo from Google Chrome development tools documentation
    @kaplas &
    Profilers will become your new best
    friends
    

    View Slide

33. UX paradigms might be strange
    Not everything works like in consumer
    apps
    @kaplas &
    

    View Slide

34. Example:
    “UI shall never show false values”
    On
    Turn off
    Turn on
    Off
    @kaplas &
    

    View Slide

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 &
    

    View Slide

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 &
    

    View Slide

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 &
    

    View Slide

38. @kaplas &
    You might not have

    an internet connection
    

    View Slide

39. @kaplas &
    How do you npm install anything?
    

    View Slide

40. @kaplas &
    How do you update anything?
    

    View Slide

41. @kaplas &
    Where is your backend?
    

    View Slide

42. @kaplas &
    How do you actually host anything?
    

    View Slide

43. @kaplas &
    Don’t worry.
    We can do on-premise installations
    

    View Slide

44. @kaplas &
    Don’t worry.
    We can have servers & virtual servers
    

    View Slide

45. @kaplas &
    Don’t worry.
    We can have a local npm registry
    

    View Slide

46. @kaplas &
    Don’t worry.
    We can dockerize everything
    

    View Slide

47. You know technologies which are
    adaptable to multiple difficult and

    non-conventional situations.
    You just haven’t thought about it before.
    @kaplas &
    

    View Slide

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 &
    

    View Slide

49. Example:
    “First view needs to load in 1 sec”
    Dev & build time Runtime
    Tooling
    Bundles assets
    Backend
    Serves bundle
    Browser
    Executes bundle
    @kaplas &
    

    View Slide

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 &
    

    View Slide

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 &
    

    View Slide

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 &
    

    View Slide

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 &
    

    View Slide

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 &
    

    View Slide

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 &
    

    View Slide

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
    

    View Slide

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
    

    View Slide

58. So now, what next?
    @kaplas &
    

    View Slide

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
    

    View Slide

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
    

    View Slide

61. @kaplas &
    Photo by Mike Kenneally on Unsplash
    It’s dangerous to go alone!
    Take these

    with you:
    

    View Slide

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
    

    View Slide

63. Creative Commons Attribution-ShareAlike
    4.0 International License
    

    View Slide

64. spiceprogram.org & chilicorn.org
    

    View Slide

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
    

    View Slide