• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Codemotion Magazine

Codemotion Magazine

We code the future. Together

  • Discover
    • Live
    • Tech Communities
    • Hackathons
    • Coding Challenges
    • For Kids
  • Watch
    • Talks
    • Playlists
    • Edu Paths
  • Magazine
    • AI/ML
    • Backend
    • Frontend
    • Dev Life
    • DevOps
    • Soft Skills
  • Talent
  • Partners
  • For Companies
Home » Dev Life » Events » Building a bike-computer on the Web with WebComponents
JavaScript

Building a bike-computer on the Web with WebComponents

We meet with Filip Bech-Larse before his talk at the Spanish edition of Codemotion Virtual conference, to learn more about WebComponents.

Last update October 30, 2020 by Cate Lawrence

web mobile app development
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: 

“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.

facebooktwitterlinkedinreddit
Share on:facebooktwitterlinkedinreddit

Tagged as:Web Developer

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

Related articles

  • Problem Hacking: Problem-solving within Tech Companies
  • Want to Hack a Boat? IoT Connected Ships Drown in Security Vulnerabilities
  • Never Be Bored with a Career in IoT
  • How Has Software-defined Networking Transformed Mass IoT Deployments?
  • Why Should You Care to Learn TypeScript?
  • JavaScript: A First Look at the Type Annotation Proposal
  • Svelte: Why Is It an Innovation to Javascript Frameworks?

Primary Sidebar

Lessons Learned in the Cloud

Dive deep into this whitepaper dedicated to the Cloud and discover more about Kubernetes.

OVH Logo Lessons learned in the cloud

Codemotion Milan 2022

https://youtu.be/ym8iilUy_U0

Latest Articles

AWS sv Azure

AWS vs. Azure Cost Comparison [2022]

Cloud

Which Cloud Adoption Strategy Should I Follow?

Cloud

php cover

PHP for Web Development in 2022: Dead, Alive, or Missing in Action?

Web Developer

Golden Rules for Combining Front-end Security and UI

Frontend

Discover More

  • Survey Reveals Four Types of Developers: Which One Are You?
  • Don’t Miss the Next Edition of our Devs Book Club with Matteo Pagani!
  • JavaScript: A First Look at the Type Annotation Proposal

Footer

  • Magazine
  • Events
  • Community
  • Learning
  • Kids
  • How to use our platform
  • Contact us
  • Become a contributor
  • About Codemotion Magazine
  • How to run a meetup
  • Tools for virtual conferences

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

DOWNLOAD APP

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

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • RSS

DOWNLOAD APP

CONFERENCE CHECK-IN