Belka

Building desktop apps in 2016

CHROMIUM EMBEDDED FRAMEWORK

Belka

GIOVANNI FRIGO

@john_frigo

CTO @ Belka

HELLO WORLD

GiovanniFrigo

Belka

Requests from our customer

• Fresh and usable UI/UX Design

• Multiplatform🖼Win + 🍏OS X + 🐧Linux

• Hardware integration

Belka

Some more detailCarlo Gavazzi is an international group active in designing, manufacturing and marketing electronic equipment.

The group's products provide automation solutions for the global markets of industrial and building automation.

Belka

INDUSTRIAL DESIGN IS HARD

• Many features

• Convincing your clients that user testing is useful is very hard

• How will I implement my pretty design?

Belka

SURE THING UI/UX DESIGN IS NICE BUT…

Belka

SURE THING UI/UX DESIGN IS NICE BUT…

Belka

WHAT COULD WE USE?

Belka

WHAT COULD WE USE?

No custom design

JVM

CHOOSE ME!

Belka

WHAT COULD WE USE?CHOOSE ME! CHOOSE ME!

Too expensive!No custom design

JVM

Belka

WHAT COULD WE USE?CHOOSE ME! CHOOSE ME!

Too expensive!

CHOOSE ME!

This is interesting…No custom design

JVM

Belka

WHAT COULD WE USE?CHOOSE ME! CHOOSE ME!

Too expensive!

CHOOSE ME!

This is interesting…No custom design

JVM

Belka

WHAT ABOUT…?

Thanks but no thanks

Belka

LAYERS

1. Web UI

2. C++

3. Modbus communication

Belka

OH NO HOW WILL WE CONNECT C++ TO MODBUS?

Belka

Belka

WHAT IS C++ FOR?

• Running CEF

• Running V8 Javascript engine

• Talk with the hardware instruments

Belka

C++/JAVASCRIPT callbacksHOW TO TALK TO C++

Belka

CEF-READY CALLBACKS

Belka

CEF-READY CALLBACKS

Belka

PULL vs PUSH LOGIC

All the calls are on a pull logic, meaning that Javascript has to call the C++ layer and then expects a (short lived) response.

How about C++ sending messages to Javascript? (Push-style)

Belka

PULL vs PUSH LOGIC

Belka

PULL vs PUSH LOGIC

Belka

JAVASCRIPT FRAMEWORKTOP LAYER

Belka

The best choice in town

Belka

Seriously

Belka

ReactJS

• The V in MVC

• Component Driven

• SUCH HIP, MUCH COOL

Belka

ReactJS

Belka

HAVE I TOLD YOU THE BEST PART?

Belka

Chrome DevTools FTW!

Belka

THAT WAS FUN!How about real life?

Belka

DON’T TRY THIS AT HOME

Belka

DON’T TRY THIS AT HOME

• Building CEF is not the easiest thing in the world

• Updating CEF can be tricky

Belka

There are easiest paths…

Belka

…trusted by many

Belka

ADVANTAGES OVER CEF

• No need to ever compile native OS code

• Easier if you just need the “Web UI” layer

• Tons of plugins available via npm

• Can be as easy as npm run package

Belka

B3Lab

BELKA