JSFoo 2019

On component architecture, front-end engineering and Developer Experience (DX)

Tickets

Hardware connectivity with Vue.JS

Submitted by Majid Hajian (@mhadaily) on Tuesday, 30 April 2019

Section: Full talk (40 mins) Technical level: Intermediate Status: Submitted

Abstract

The browsers can actually take control of physical devices in the real world like lightbulbs, robots, printers, NFC tags, toys, and even drones by providing new web standard hardware connectivity APIs such as WebBluetooth, WebUSB, WebNFC and etc.

On the other hand, Progressive web apps open a new era to build a web application that works offline and resemble a native application. Hence, every day we are getting closer to run web apps only on browsers that don’t need to be installed from any app store and it will take control of hardware around us.

In this session, I am going through some of the web capabilities to connect devices into a Vue.js progressive web app and show how the web could go beyond the browsers and take control of our devices around us.

Outline

— Longer description —
Initial Outline which its goal is to show interesting demos in addition to theory:

  • web Hardware abilities APIs explanation

  • The WebBluetooth API explained

– Demos
— a simple fitness app that shows your heart rate while exercising
— possible a drone that flies, controlled by a wristband
— take control of BLE devices and …

  • The WebUSB API explained

– Demos
– connect to a Thermal Printer
– connect to my Android Device via ADB and control my device via web application from the browser using WebUSB.
– connect to an Arduino and print on an LED, and do other actions

  • The NFC API explained

    • Demos
      – NFC ring and NFC tags
      – A simple web shop that you can scan your NFC tag and be authenticated, then you can scan items and then print via BLE printer.
  • PWA fundamentals walk-through

  • Possibility to download from Google play as a demo,

  • Future APIs such as project Fugu and other exciting API which will come to browsers.

Additional information:

Why this talk? Because First of all, I am passionate about Progressive web apps and this topic in general and also it is an interesting subject that most web developers know very little of, or even do not know at all that this is possible as these APIs are fairly new and recently has better support in browsers. it shows to web developers, how their web application can resemble a native app using PWA which will be so powerful in the near future using hardware APIs on the web and how they can seamlessly become an IoT developer too! which I guess makes them excited about these new technologies. This presentation will hopefully provide lots of fun with demos during presentation too.

Requirements

Just need an extra table to put all of my devices.

Speaker bio

Majid Hajian is a software developer has developed and architected complex web applications since 2007 after he graduated as a software engineer.
A software developer at heart, Majid is passionate about web platform especially hardware connectivity and performance and in particular Progressive Web Apps.
He loves sharing his knowledge with the community by writing on his blog majidhajian.com and tweeting @mhadaily, speaking at conferences, visiting developers to help them, contributing to open source and organizing meetups and events.
Majid is the author of “Progressive web app with Angular” book published by Apress and “Progressive Web Apps” video tutorial published by PacktPub and Udemy.
He is (co)organizer of a few meetups in Norway dedicated to frontend and mobile in Oslo including Mobile meetup and Vue.js Oslo and Angular Oslo, Framisa and an Organizer of Mobile Era and ngVikings which are the main Nordic conferences for mobile and Angular.

Links

Slides

https://slides.com/mhadaily/vueware/#/

Preview video

https://vimeo.com/338424490

Comments

  •   Abhishek Balaji (@booleanbalaji) Reviewer 10 months ago (edited 10 months ago)

    Hi Majid,

    Thank you for submitting a proposal. Please update your slides with more details. Your slides must cover the following:

    • Problem statement/context, which the audience can relate to and understand. The problem statement has to be a problem (based on this context) that can be generalized for all.
    • What were the tools/frameworks available in the market to solve this problem? How did you evaluate these, and what metrics did you use for the evaluation? Why did you pick the option that you did?
    • Explain how the situation was before the solution you picked/built and how it changed after implementing the solution you picked and built? Show before-after scenario comparisons & metrics.
    • What compromises/trade-offs did you have to make in this process?
    • What is the one takeaway that you want participants to go back with at the end of this talk? What is it that participants should learn/be cautious about when solving similar problems?

    We need your updated slides and preview video by 27 May to evaluate your proposal. If we do not receive an update, we’d be moving your proposal for evaluation under a future event.

  •   Majid Hajian (@mhadaily) Proposer 10 months ago

    I have added a video,
    I am not sure I actually understand when you say slides, because these slides meant to be shown to audeinces and I will talk over my slides. However, I will answer all of your concers one by one here:
    1- Problem: It was impossible to connect hardware to web years back, however, with new APIs like webBluetooth and WebUsb it’s possible to directly connect a hardware to a web application, which I think that’s very excisting.
    2- That was a web issue and nowadays, new Javascript standard implementing in different browsers along with PWAs can solve this issue in order to make an offline app that is capable of connecting hardware like a fitness app that can directly can be connect via web application and be installed on user screen.
    3- Well, years back, it was not even possible, however, these days with new APIs it is possible to connecct harware to browsers and web application. Also, that will open new doors to add more hadrware via IoT protocols like mqtt. in short, from something which was not existed at all to something that is possible now.
    4- I love IoT and PWA and I think combination of both these days makes a perfect sense.
    5- one and the most important take away is to not to scare to play and build PWA especially with Harwares. It looks so complicated working with USB and Bluetooth however, I will make it simple that everyone can understand and then start working with them.

    Please do let me know if I need to do anything more. I am happy to clarify if any.
    Majid

  •   Zainab Bawa (@zainabbawa) Reviewer 8 months ago

    Majid, thanks for sharing all these details. Appreciate your follow-up.

    As I see it, this is more a talk about JavaScript and IoT rather than about Vue. We can look at this talk for JSFoo, which will be held in Bangalore on 27 and 28 September. For VueDay, I don’t see much in this talk that justifies it for VueDay and for participants attending this conference.

    Let me know if we can consider your proposal for JSFoo.

  •   Majid Hajian (@mhadaily) Proposer 8 months ago

    Hi, Sounds great, please consider it for JSFoo, I will be happy to share my knowlege in any way.

    I can slightly change the talk title and description but the content are mostly the same with a bit adjustment for JS conferene.

    Title: Things in the PWA Era!
    Description:
    In daily basis where billions of billion devices are connected to the internet, browsers can actually take control Things like lightbulbs, robots, printers, NFC tags, toys, drones, and many more Things via web standard APIs such as WebBluetooth, WebUSB, WebNFC, Shape Detection API and etc. How about connecting to IoT gateway which supports Wifi via BLE ?!

    On the other hand, Progressive web apps open a new era to build web apps that work offline and resemble native apps. PWAs are installable too, therefore, your solution to controlling Things in the real world can be written once for web and reuse everywhere.

    In this session, I am going through some of the web capabilities to connect devices into a progressive web app and demonstrate how the web, eventually, could go beyond the browsers. There will be lots of demos such as Connect to IoT gateway via BLE over Wifi, Drone controller, NFC reader, Android ADB connector to Web and more.

    Thanks,
    Majid

    •   Zainab Bawa (@zainabbawa) Reviewer 8 months ago (edited 8 months ago)

      Thanks. I have moved your proposal here. You can update the description for the proposal.

Login with Twitter or Google to leave a comment