the awesome world of mobile front end engineering

NextStep 2015

The Awesome World of Mobile Front End Engineering

Dinis CarvalhoFront End Developer at OutSystems [email protected]

5 years exp Mobile Apps and GamesMost of my work: SilkWho knows Silk UI?3

Paths to Build Mobile Apps

Changes of Web and Mobile

Great App Composition

Different paths to build appsLook Back Understand what changedKey elements for good app experience

TODO: get THE image

When it comes to choosing the right technology to develop mobile apps, there are a few different paths that we can follow, each one with very strong arguments in their favor, but also some limitations that can have a big impact on a business. 4

NativeHybridWeb

More Device FeaturesLess Device FeaturesMulti PlatformSingle Platform

Device Features, High skillset, Maintenance CostsNo Offline, No Device features, Only needs a BrowserOffline, Multiple Platforms, Single Code Base, Device features

Mobile integrations Ruben Gonalves 11:30

We can make users feel at home - different platforms5

Built with platform 10Sight UI changes to adapt to the OSWithout changing the app functionality6

Evolution of Web and Mobile Ecosystem

Discussion mobile web apps could perform7

Hardware

3GQuad Core4G4k Screen8GB RAM

Limited 3g data plans and speed4 core processors Performance Increase4g more time online, Social Apps, Chat4k screens in 2016, bigger than my flatscreen8gb RAM this Year8

Mobile Browsers

Harware isnt the cause for Web performance50% of the improvements - SoftwareJS performance, Reflows, Repaints9

The Usual Suspects

HTML, CSS and JS have new featuresEasier, Performant for Animations, Handle DOMWebinar Troubleshooting Mobile Apps Performance

TODO: CSS vs JS interpretation by the browser10

Variety of Frameworks

TouchStone

Frameworks are great development boostBackend, Manage DOM rendering, UISome are similar, Matter of Preference11

Detach Native Environment

Support of New Features

Focus on Optimization

The Tradeoff

Replicate native UI and controlsAccelerate with UI frameworkOld device supportFocus on optimizationSmall mistakes can have a big impact12

Developing a Great Mobile Experience

Keep user experience as first priorityKey elements that create a great app, from my experience

13

LayoutInteractionContent

Layout - Base of the app all UI, Put Everything in place14

Left: hilighted the base screen layoutMiddle: content items structureRight: inner level of structure definitionMaking sure items will keep their aspect and not break the layout, depending on content15

flex-direction: columnflex-direction: rowjustify-content: space-betweenalign-items: center

New CSS display value: flexSize, alignment and distribution of itemsEasily control behavior on a single elementFlexible? 16

.layout {display: flex;flex-direction: column;}.header {min-height: 50px;}.content {flex: 1;}.tap-bar {height: 50px;}

17


Content - Display information, Easy to read18

Image File Format

Images play a big roleHigh quality but low file sizeGIF Animated, compatibilityPNG Transparency, low color variationJPG Lossy, optimized file size19

.cover-image {background-image: url(image.jpg);background-size: cover;background-position: center center;}CSS Background

20

img {object-fit: cover;object-position: center center;}Dynamic Image Element

21

Keep it Simple

Avoid too much informationBreak it down in detail screens22


Interaction - Reacts to User Input in a natural Way, Separates Great Apps from Responsive Web23

DashboardMy TasksMy ProjectsSearchEdit ProjectTask DetailEdit TaskProject Detail

App Flow Natural TransitionsUI Patterns and InteractionsSimple App Has all the good stuff24

Screen Transitions

Cross Fade Transition

25

Screen Transitions

Slide in the natural Direction

26

Screen Transitions

Slide from Bottom

27

Element State

Simple, Meaninful Changes

Simple, Meaningful ChangesChanged the meaning of the Plus iconInteraction feedback28

Pull To Refresh

Natural Scroll Motion

Lists ordered by newest firstNatural scroll motionRemoves explicit actions29

Button Tap

Input Feedback

Provide user input feedbackSlow connectionsUsing :active doesnt quite cut it30

Native Scroll.content {-webkit-overflow-scroll: touch;}

Smooth Scroll, Elastic effectHandled by the GPUCSS only31

Sticky Headers.section-title {position: -webkit-sticky;}

When scrolling on long listsKeeps Context of where item belongsCSS only32

Animations

34

AnimationsTransformOpacityFilter

Use CSS3 why the game is so smoothAvoid jQueryManually with requestAnimation35

TransitionChange appearance and behavior of an elementAB

36

AnimationChange appearance and behavior of an element, in multiple keyframesABC

37

Platform 10Mobile Silk UI Framework

P10 is comming, Silk MobileAll Key elements are a part of themFlex for Layout definitionUI Patterns for Content andUser Interaction Principles38

Screen Transitions Built InAnimated Widgets, Visible PropertySilk Templates - Native Scroll, Tap animationShipping dozens of Sample Screens to get inspiredSilk Patterns - Pull to Refresh and Sticky HeadersMore 30 Mobile Patterns39

Some screens that we will deliver yo help youCant wait to see the Amazing Apps you can do with P10Its gonna be amazing!40

Thank [email protected]/in/diniscarvalho41

41