• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Codemotion Magazine

We code the future. Together

  • Discover
    • Events
    • Community
    • Partners
    • Become a partner
    • Hackathons
  • Magazine
    • Backend
    • Frontend
    • AI/ML
    • DevOps
    • Dev Life
    • Soft Skills
    • Infographics
  • Talent
    • Discover Talent
    • Jobs
    • Manifesto
  • Companies
  • For Business
    • EN
    • IT
    • ES
  • Sign in
ads

Cate LawrenceOctober 30, 2020

Building a bike-computer on the Web with WebComponents

JavaScript
web mobile app development
facebooktwitterlinkedinreddit
Table Of Contents
  1. Choosing Web Bluetooth over mobile-first?
  2. Wanting to learn something new with a side project? 
  3. Why WebComponents? 
  4. Web Audiometric with it. What's the idea there?
  5. Google Developers experts program

Passion projects offer a great opportunity to learn new skills and develop experience in pursuits you really enjoy. A keen cyclist, Filip Bech-Larse developed a trainer app that reads sensor-data via WebBluetooth from different sources, including Heart-rate, Speed, and Cadence. Filip is a front-end developer from Denmark, and the Head of Technology and Innovation at IMPACT, delivering large-scale commerce-products to well-known business and consumer brands. I spoke to him prior to his presentation at Codemotion’s online conference: The Spanish edition about how he created the opportunity to learn WebComponents.

Choosing Web Bluetooth over mobile-first?

I was curious why Filip opted for Web Bluetooth in the first instance. He gave two great reasons: 

Recommended article
javascript, typescript release, javascript guide
November 14, 2023

7 JavaScript Data Structures For Solving Real-World Problems

Pohan Lin

JavaScript

“Firstly, platform independence. So you can write your code once and have it deployed, no matter if it’s an Android phone, or Windows Phone or your desktop computer or wherever you want it to operate.  Secondly, I really like that I’m in charge of the code. So, there’s no app store or restriction to the customer.”

webcomponents bluetooth

Creating a product is always a great tangible way to learn a hands-on skill instead of watching a video or reading a book. Filip notes that he wanted to play with Web Bluetooth. “And I thought this was kind of a fun way to do it that was relevant to something I found personally interesting. I got started, just around the last COVID-19 lockdown, and as I had to stay in my house,  it was a good way to get some exercise done as well.”

Wanting to learn something new with a side project? 

Maybe you’ve been wanting to build something but you’re not really sure how to get started. Filip advises: “I think you start by just trying to build something, even if it’s only for you. You don’t have to have a perfect idea. You don’t have to have a business plan. Really just start building something. And it’s fun – to me, that’s the most important part. Eventually, I moved onto Swift like everybody else, and I don’t use my own stuff anymore. But I think it was a fun experience.  You learn so much more from actually trying to build something by yourself.”

Why WebComponents? 

Filip asserts that WebComponents have a much broader audience than simply Web Bluetooth stuff (we discussed about this technology here). He suggests that Bluetooth is still limited in some respects, “but I think web components are really the model of everything on the web. And I think one component will eventually take over, and just be how you do components on the web everywhere.”

angular, vue, node webcomponents

He explained: 

 “I used to do stuff with React and with Vue and with Angular, and I did everything from AngularJS, to jQuery and stuff. I really see web components as a very important milestone in the future of web development. I like the idea that you take an almost primitive thing that all the frameworks agree on, and then you actually put it in the platform so that the frameworks don’t have to compete over implementing the same feature.  They can actually just use the platform. I think that that’s better for frameworks and everybody wins in this scenario.” 

Web Audiometric with it. What’s the idea there?

The use of Web Audio metronome was motivated to play with more web technologies. But Filip was also attracted to the idea to make something that beeps along with your heart, which offers an audible indication of your stress levels and how your body is responding to exercise. He notes that “When you play it alongside music, it’s easy to hear if it goes up or down. I actually started out connecting it to like the cadence of the cycling. Typically when you do indoor sessions, you do two minutes at 80mph or two minutes at 90 mph, and the metronome kind of makes it easier to follow along.” 

Google Developers experts program

Filip is a Google Developer Expert (GDE) in Web technologies. He describes the program as akin to an MVP program which offers great benefits: 

“It gives me access to people within Google that actually work on the stuff that I like. So I get to sit down with the engineers that actually build through them, and talk to them about, for example, considerations in how an API should work or how standards should evolve. From a framework perspective, a part of the GDE program is actually also access to the Angular team and how they work with Angular and where that’s going. And I think that’s pretty interesting.”

The program also provides access to international conferences as a speaker in places such as Romania and Ukraine and picks up the costs, providing valuable experience speaking around the world. 

During his talk, Filip will demonstrate building the app with WebComponents in TypeScript, and talk about different modules and production optimisations. He’s looking to extend the capability of his bike computer to a progressive web app. During this talk he’ll showcase his creation – in his bike shed, suitably attired in lycra – and turn his creation into an offline-capable PWA that in the future could be added to the Microsoft Store and Play store.

Related Posts

Javascript color library. Discover how to use it in this guide.

The Best Color Manipulation Library in JavaScript

Antonello Zanini
August 21, 2023
svelte, javascript frameworks, vue.js, angular, react libraries

The Most Common Questions About JavaScript: A Complete Guide

Riccardo Degni
June 28, 2023
modern react applications

Video: Let’s Build a Modern React Application

Codemotion
November 16, 2022
integrate VueJS

How-to Guide: Adding VueJS to Your Existing Project

Codemotion
August 8, 2022
Share on:facebooktwitterlinkedinreddit

Tagged as:Web Developer

Cate Lawrence
Want to Learn about Genetic Algorithms? Start Life Hacking
Previous Post
Design Thinking – Ideas to Implementation
Next Post

Footer

Discover

  • Events
  • Community
  • Partners
  • Become a partner
  • Hackathons

Magazine

  • Tech articles

Talent

  • Discover talent
  • Jobs

Companies

  • Discover companies

For Business

  • Codemotion for companies

About

  • About us
  • Become a contributor
  • Work with us
  • Contact us

Follow Us

© Copyright Codemotion srl Via Marsala, 29/H, 00185 Roma P.IVA 12392791005 | Privacy policy | Terms and conditions