This talk will introduce an in-house framework developed at Flipkart called "Proteus" and also touches on the how it was built from scratch. The framework enabled Flipkart to send a layout describing the view hierarchy from the server, rather than bundling it the traditional way inside the app. This framework also helped in doing A/B experimentation of the UI components as well as build native pages on the fly without the need for app updates Fork the repo at https://github.com/flipkart-incubator/proteus

1. Proteus
Android Layout Engine

2. About us
Kiran Kumar @thekirankumar
Aditya Sharat @adityasharat
We are developers in the Mobile engineering team at flipkart

3. What we wanted to do
Can we change the color of the “Buy Now” button?
Can we increase the size of the Product Images?
Can we change “Buy Now” to “Book Now” for some products?
Can we add a subtitle below the title?
We wanted to modify the UI of our application without an update.
Sure we can; but next month!

5. What is Proteus
Proteus is an android library for achieving granular control over the visual
appearance and data persistence over views/widgets displayed in any mobile
app. Meant to be a drop in replacement for android’s LayoutInflater which
allows creating and inflating layouts at runtime unlike the compiled XML
layouts bundled in the APK.
This talk will introduce an in-house framework developed at Flipkart called
"Proteus" and also touches on the how it was built from scratch.
The framework enabled Flipkart to send a layout describing the view hierarchy
from the server, rather than bundling it the traditional way inside the app. This
framework also helped in doing A/B experimentation of the UI components as
well as build native pages on the fly without the need for app updates.

6. What is Proteus

7. Why not use XML inflater ?
Remote XMLs are
not supported by
Android’s layout
inflater !

8. How Android LayoutInflater works
1. AAPT converts raw xml to binary xml
2. Recursively walk through the xml
3. Find the next class to instantiate using Reflection
4. Invoke constructor of the found View class
5. Cache the constructor in-memory
6. Pass the XML attributes to the created View
7. Ask the view to set fields or call methods on itself for
handling these attrs
8. Go to step 2

9. Capabilities of Proteus
Build Views and compose Layouts.
Runtime Data Bindings and Formatters.
Describe Shapes and Animations.
Custom Views and Attributes can be plugged in.
Styles (like CSS), reusable attributes-values.
Fallbacks and failsafes are built into the library.

10. Built in data binding support
Ability to separate layout and data, keep layout cached for a longer time
Ability to change the data which updates the view automatically
Java code can only worry about data and forget the layout

11. Supported Android Widgets and Attributes
And Many More

12. Supported Drawables and Animations
● detachWallpaper
● duration
● fillAfter
● fillBefore
● fillEnabled
● interpolator
● repeatCount
● repeatMode
● startOffset
● zAdjustment
● shareInterpolator
● children
● fromAlpha
● toAlpha
● fromXScale
● toXScale
● fromYScale
● toYScale
● pivotX
● pivotY
● fromXDelta
● toXDelta
● fromYDelta
● toYDelta
● fromDegrees
● toDegrees
● pivotX
● pivotY
● controlX1
● controlY1
● controlX2
● controlY2
● tension
● extraTension
● cycles
● linearInterpolator
● accelerateInterpolator
● decelerateInterpolator
● accelerateDecelerateInterpolator
● cycleInterpolator
● anticipateInterpolator
● overshootInterpolator
● anticipateOvershootInterpolator
● bounceInterpolator
● pathInterpolator
● Shape Drawables
● Gradient Drawables
● Layer List
● Resource References

13. Demo

14. Adding Custom Views?
Easily doable by using Custom View Parsers

15. Some Numbers
Number of releases avoided: 3
Development effort reduced: ~2 months
Number of A/B tests: 7(completed) 3(running) + (many planned)
Near Native performance
Sample layout render time:
Native: 25.0ms
Proteus: 24.4ms
Lots of adoption time saved.

16. Infrastructure tools around Proteus
Studio plugin to convert XML
Web editor to edit/manage/test layouts
MVC library to manage behaviour
Server to handle versioned layouts
A/B service for delivering different layouts

17. Scripting support ??
Not yet

18. Advantages
Zero adoption time
Update UI in older apps
Brand specific pages / themes
Customizing different AD layouts
Faster build times (local mode)
UI changes can be done by designers
A/B testing of different layouts

19. Road Map
Improve performance
Better Android Studio integration
Scripting Engine

20. The Bigger Picture

21. It’s open source !!
https://github.com/flipkart-incubator/proteus
Looking forward for your contributions

22. Other Android FOSS by us
Chat heads https://github.com/flipkart-incubator/springy-heads
Batching analytics events https://github.com/flipkart-incubator/batchman
Network stats https://github.com/flipkart-incubator/okhttp-stats
Contact image grouping https://github.com/flipkart-incubator/circular-image

23. Other proteus like libraries
Json2view https://github.com/Avocarrot/json2view
AndFix https://github.com/alibaba/AndFix
ItsNat Droid https://github.com/jmarranz/itsnat_droid
React native https://facebook.github.io/react-native/