$30 off During Our Annual Pro Sale. View Details »

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.

Jouni Kaplas

July 13, 2017
Tweet

More Decks by Jouni Kaplas

Other Decks in Technology

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
    [email protected]

    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
    [email protected]
    Photo by Amy Skyer on Unsplash

    View Slide