From HTML5 to Hardware - Simonyi Conference Budapest April 15

From HTML5 to hardware

@janjongboomSimonyi Conference, Budapest, April 15

Tuesday, April 15, 14

@janjongboomTuesday, April 15, 14

I’m Jan, live in Amsterdam. Work for Telenor on Mozilla products. Firefox OS contributor & keyboard peer. I write code for Gaia and Gecko.

Internet is normal for western world, but big part of the world doesnt have it.

Click Only 2.5 billion people out of 7.

4,500,000,000

Internet is normal for western world, but big part of the world doesnt have it.

Click Only 2.5 billion people out of 7.

The web has everythingInformation does not like to be locked down

We want people to access the web, not the closed silo’s that Android / iOS are, because thats not where the information is

Affordable device to access the internet

So goal: affordable device that people can use to get on the internet

Meet Firefox OS

19,000 HUF

First generation came out last year. Goes for about 19000 HUF here in Hungary (65 eur)

Next generation is going to be lower. System requirements are four times as low as Android.

Great performance on cheap hardware?

So if we want to get great performance out of cheap hardware, how do we do it?

Traditional model: Application -> VM (f.e. Dalvik on Android; .NET on Windows Phone, JavaScript in V8)

Dalvik .NET V8

Apps Apps Apps

Most mobile OS’es

VM on top of OS. Kernel is hardware dependent. But always two layers between App and Kernel.

Most mobile OS’es

App VM

Most mobile OS’es

App VM OS

Most mobile OS’es

App VM OS Kernel

Most mobile OS’es

App VM OS Kernel Hardware

Firefox OS

Browser

Kernel Hardware

Firefox OS only has one intermediate layer. The browser. Everything has to go through there. No exceptions like proprietary APIs (ok, well a few)

One application runtimeBrowser runs directly on top of the kernel

So browser directly on top of the kernel. No overhead.

Everything runs in browserSMS, Payments, Marketplace

System itself can’t take shortcuts. Everything is browser. Also system apps.

Small Kernel

• Small Linux kernel

• Based on Android Open Source Project

• Contains Hardware Abstraction Layer

• Porting target

• Boot straight into Gecko

All runs on top of a very small kernel. Based on Android OSP. Contains HAL and boots straight into Gecko. Gecko is browser engine.

WindowsTuesday, April 15, 14

Makes it easier and light weight. Windows: 998 lines of calls to Win32 API on clipboard code.

Firefox OSTuesday, April 15, 14

Firefox OS: 200 lines, just have a var that holds the clipboard. Other stuff is IPC.

Application runtime

Application runtime is done through iframes. Every application is iframe.

Window Manager

• Boot into HTML app (system)• System is the window manager• Applications are loaded in iframe• iframes can be ran out of process

The window manager is called the system app. It creates the iframes on demand. There is automatic process isolation in place. For example Here maps.

remote=true

It’s an iframe that points to a special URL that maps to a location on disk. But it has remote=true.

Automatic process isolation, and automatic user isolation. Security ftw.

Tracing down a SMS messageFrom HTML to the RIL

All cool, but now let’s talk about some actual code. How does it look like if you make a call from HTML to the RIL.

I NEED AN ADULT!Tuesday, April 15, 14

No clue what the RIL is? I’ll walk you through it.

We’ll walk over what happens if you click Send, up until the moment it reaches the cell tower.

User Interface

Browser engine

Kernel

FFOS consists of three layers. Gaia, Gecko, Gonk

Gaia• Frontend• github.com/mozilla-b2g/gaia• All system applications• HTML/CSS/JS• SMS app code under /apps/sms

(that easy!)

Gaia, open source frontend. Not limited to only run on Gecko (but at the moment it is).

index.html

SMS app index.html has the button

thread_ui.js

Button has click handler that goes to MessageManager. There is also a callback involved.

thread_ui.js

message_manager.js

MessageManager makes a call to Gecko (under navigator object). Returns a DOMRequest. Like a promise.

message_manager.jsGecko!

We need to go deeper!Tuesday, April 15, 14

So let’s go into Gecko.

• Browser engine• Same as Firefox for Desktop / Android / etc.• Runs directly on kernel (B2G)

Browser engine

nsIDOMMobileMessageManager.idl(yeah, that’s long)

Gecko has IDL files. These are shared by browser vendors so eveyrone implements the same API. Can be implemented in C++ or JSM (variant of JS)

addEventListener

MobileMessageManager.cppCould also be .jsm

Inheritance chain. This is written in CPP.

MobileMessageManager.cppCould also be .jsm

Inheritance chain. This is written in CPP.

MobileMessageManager.cpp

JS values get boxed automatically. We create a new DOMRequest. See the gaia code.

Then in the same function we make a call to the SMS Service. This is platform specific. Android does different than FFOS.

Services are platform speci!c

Then in the same function we make a call to the SMS Service. This is platform specific. Android does different than FFOS.

moz.buildService injection at compile time

This is the service injection in moz.build. Happens at compile time. In android we need Android SMS database access. FFOS we don’t.

moz.buildService injection at compile time

This is the service injection in moz.build. Happens at compile time. In android we need Android SMS database access. FFOS we don’t.

Time to go DEEPER

• Kernel• Hardware Abstraction• Think of the clipboard example• Android code calls back to Android• We can go straight to the RIL

Gonk is the kernel. If you have platform dependent code it’s not in Gecko but in Gonk. Target for Gecko.

SmsService.cpp

Get the radio interface layer. It’s the API to the chipset in the phone. And send SMS.

SmsService.cpp

dom/system folder

There are a bunch of platforms, they implement the services. In this case the RIL service is implemented by Gonk.

nsIRadioInterfaceLayer.idl

Also has IDL definitions.

RadioInterfaceLayer.jsCould also be .cpp

RIL code has been written in javascript in this case. It does stuff like normalizing phone numbers, because the chipset won’t do that for you

RadioInterfaceLayer.js

Now dispatch to a worker. JS single-threaded. Can’t wait for the response from hardware. Response codes are RIL data. Use these to feed back into the DOMRequest.

rilMessageToken is used to get the callbacks.

Something in between to shake up the audience.

ril_worker.js

Now ril_worker talks to the actual hardware. Pretty simple stuff. Some options.

Mindig írni byte az én RIL!

I always write bytes to the RIL. RIL doesn’t understand JS or CPP. Only understands bytes.

ril_worker.js

So now depending on protocol we talk, we dump bytes. SEND_SMS is 25, then some options. Send the parcel and now it’s on the actual RIL.

ril_worker.js

Radio Interface Layer• Proprietary• Comes with chipset• Trade secret• Delivered to RIL? Done!• See how it looks like?

https://github.com/mozilla-b2g/b2g/

And that’s where our job is done. RIL is proprietary and comes with chipset. RIL calls back with the token, we bubble it up back to Gecko and eventually Gaia, and show user the feedback. This happens in under a second. There is ref implementtion from Mozilla if you want to look at it.

OMGAWESOMEPlay around? I have devices with me.

OMG AWESOME SHIT. All open source. I have some devices, including the 25$ phone with me.

Thank you!

slideshare.net/janjongboomTuesday, April 15, 14

Thanks!

slideshare.net/janjongboom

Questions?

Thanks!

From HTML5 to Hardware - Simonyi Conference Budapest April 15

Internet

Html5 viewer HTML5 office kukudocs

“HTML5”: more than just HTML5

HTML5 - (01) Visão Geral do HTML5

[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ...interoperability.blob.core.windows.net/web/MS-HTML5/[MS-HTML5].pdf · Microsoft Edge / Internet Explorer HTML5 Standards Support

Simonyi Ágnes - ESÉLY · 2012. 10. 31. · Simonyi: Aktiválás – foglalkoztatás- és szociálpolitikák eszközeinek és intézményeinek… pontjába. Az elmúlt évtizedek

Hire html5 developer for html5 development and html5 game development

Kispesti Károlyi Mihály Magyar-Spanyol Tannyelv Gimnázium ...Kispesti Károlyi Mihály Magyar-Spanyol Tannyelv ű Gimnázium, Simonyi Zsigmond u.33., Budapest 2019. szeptember 16

NY HTML5 - Game Development with HTML5 & JavaScript

Run * on the JVM - Simonyi Conference Budapest April 15

A survey on graph entropy by Gabor Simonyi

Meta-Programming - a Software Production Method by Charles Simonyi

KPMG Corporate Finance LLC Business Services M&A Quarterly · 2020-02-26 · Eric Bots-Bjerre Russia Moscow Maxim Filippov Hungary Budapest Tamás Simonyi SriLanka Colombo ... Market

Concentrated HTML5 & Attractive HTML5

Oral History of Charles Simonyi - Archive Serverarchive.computerhistory.org/resources/access/text/2015/06/... · Grady Booch: I'm here with Charles Simonyi [February 6, 2008]. Charles,

FIZIKA - dload.oktatas.educatio.hudload.oktatas.educatio.hu/.../e_fizma_17maj_fl.pdf · Simonyi Károly: A fizika kultúrtörténete Budapest, 1981. Mit nevezünk nukleonnak? Nevezze

HTML5 소개 및 배우기- HTML5 Open Conference

Simonyi Károly Emlékülés Sopronban - EPAepa.oszk.hu/02900/02926/00021/pdf/EPA02926_termeszet_vilaga_2014_09... · Simonyi Károly professzor neve a karon jelenlev5 többféle

HTML5/CSS3 Course Introduction to HTML5 · HTML5/CSS3 Course Introduction to HTML5 Presenter: Msc. Luong Tran Hy Hien, FIT of HCMUP. 2 HTML5 = HTML + CSS + JS API. Contents •HTML5

SIMONYI ZSIGMOND HELYE A MAGYAR NYELVTUDOMÁNY …iskola alapelvei szerint építi fel a Tüzetes Magyar Nyelvtan fejezeteit. 3 . Simonyi Zsigmond tudós egyetemi professzor volt,

Ember a világ rben - zmgzeg.sulinet.hu · Ember a világ űrben Összeállította: Juhász Tibor 5 Lent a földön Újra a Földön Charles Simonyi Simonyi Károly • 1916 – 2001