Upload
dinis-carvalho
View
139
Download
1
Embed Size (px)
Citation preview
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
LayoutInteractionContent
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
LayoutInteractionContent
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