Slides from my talk about Bobril - React and Mithril inspired Frontend framework for building single page apps

1. BOBRIL
OS FE FW IN TS
Tomáš LÁTAL | @TomasLatal | t.latal@gmc.net

2. BOBRIL | JOPENSPACE 2016 CZ
YEAR 2014 AT GMC
▸ ANGULAR 1.2 IN
PRODUCTION
▸ FOCUS ON MOBILE
▸ CORE APP
GROWTH
▸ MORE FEATURES
PLANNED
TOMÁŠ LÁTAL | @TOMASLATAL

3. BOBRIL | JOPENSPACE 2016 CZ
WHERE TO GO NEXT?
▸ ANGULAR
▸ 2.0
▸ REACT
▸ VDOM
▸ COMPONENTS
▸ SLOW & BIG
TOMÁŠ LÁTAL | @TOMASLATAL

4. BOBRIL | JOPENSPACE 2016 CZ
23.9.2014 - BOBRIL
▸ FIRST COMMIT
▸ SECOND COMMIT
https://github.com/Bobris/bobril-build
TOMÁŠ LÁTAL | @TOMASLATAL

5. BOBRIL | JOPENSPACE 2016 CZ
FEATURES
▸ insp. by REACT
▸ VDOM
▸ COMPONENTS
▸ insp. by MITHRIL
▸ SIZE
▸ MORE COMPLEX FW
▸ HIGHER SPEED
▸ SMALLER SIZE
TOMÁŠ LÁTAL | @TOMASLATAL

6. BOBRIL | JOPENSPACE 2016 CZ
SPEED
▸ BETTER VDOM COMPARING
▸ REDRAW BATCHING
▸ PARTIAL INVALIDATES
TOMÁŠ LÁTAL | @TOMASLATAL

7. BOBRIL | JOPENSPACE 2016 CZ
SPEED - JSBENCHMARK
ANGULAR 1.5
VUE 1.0.26
ANGULAR 2.0
REACT 15.3.1
CYCLE.JS
BOBRIL
VUE 2.0 BETA
VANILLA JS
x-times slower than Vanilla JS
1,0 1,3 1,6 1,9 2,1 2,4 2,7
1,00
1,37
1,40
1,46
1,81
1,85
2,16
2,62
http://www.stefankrause.net/wp/?p=316
TOMÁŠ LÁTAL | @TOMASLATAL

8. BOBRIL | JOPENSPACE 2016 CZ
SIZE
ANGULAR
REACT 15.3.1
BOBRIL
BOBRIL GZIP
SIZE OF JS FILE AFTER BUILD
0KB 35KB 70KB 105KB 140KB
17kB
40kB
128kB
140kB
TOMÁŠ LÁTAL | @TOMASLATAL

9. BOBRIL | JOPENSPACE 2016 CZ
MORE FEATURES
▸ MOUSE AND TOUCH EVENTS
NORMALIZATION (and other
events as well)
▸ SUPPORT FOR G11N
▸ CSS IN CODE
▸ SVG SUPPORT
▸ ROUTER
▸ IE9+, Android 4.1 (IE8 in v2.x)
TOMÁŠ LÁTAL | @TOMASLATAL

10. BOBRIL | JOPENSPACE 2016 CZ
BOBRIL-BUILD - ONE TOOL TO RULE THEM ALL
▸ DEVELOPMENT MODE
▸ BUILD IN MEMORY
▸ LOCAL SERVER FOR TESTING
▸ PRODUCTION MODE
▸ MINIMALIZATION
▸ SPRITE GENERATION
▸ UNUSED CODE DETECTION
https://github.com/Bobris/bobril-build
TOMÁŠ LÁTAL | @TOMASLATAL

11. BOBRIL | JOPENSPACE 2016 CZ
BOBFLUX
▸ FLUX/REFLUX/REDUX
▸ PURE FUNCIONAL
IMPLEMENTATION
▸ ONE IMMUTABLE GLOBAL STATE
▸ ONLY ACTIONS CAN CHANGE
STATE
▸ VIEW IS COVERED BY BOBRIL
https://github.com/karelsteinmetz/bobflux
TOMÁŠ LÁTAL | @TOMASLATAL

12. BOBRIL | JOPENSPACE 2016 CZ
OPEN-SOURCE COMPONENTS
▸ BOBRILSTRAP
▸ https://github.com/keeema/bobrilstrap
▸ BOBRIL-M
▸ https://github.com/Bobril/Bobril-m
▸ ngBobril
▸ https://github.com/karasek/ngBobril
https://github.com/karelsteinmetz/bobflux
TOMÁŠ LÁTAL | @TOMASLATAL

13. BOBRIL | JOPENSPACE 2016 CZ
TRY IT YOURSELF - IT’S NPM EASY
▸ npm i bobril
▸ npm i bobril-build -g
https://github.com/Bobris/bobril
TOMÁŠ LÁTAL | @TOMASLATAL

14. BOBRIL | JOPENSPACE 2016 CZ
▸ STACK-OVERFLOW
▸ GITTER
▸ GITHUB
https://github.com/Bobris/bobril
COMMUNITY
TOMÁŠ LÁTAL | @TOMASLATAL

15. BOBRIL | JOPENSPACE 2016 CZ
THANK YOU
Tomáš Látal
@TomasLatal
t.latal@gmc.net
HTTPS://GITHUB.COM/BOBRIS/BOBRIL