Building Stellar Mobile UX With React Native

my name is Alex tatarskiy I used to be an iOS developer from iOS for something like that and then I joined Facebook where they taught me how to use HTML CSS and JavaScript to build web apps so I did that for a while and then react came out and I was blown away I I completely fell in love with this framework I knew it's going to be big like it was such a huge shape that I was really excited about so I joined react native team and I worked in there for like three years focusing mostly on the developer experience Facebook integrations and stuff like that but I also really enjoyed building apps with retina so last year with both afraid app they will open source to documented and it's available out there and now I'm working at Otto's helping them build some of them about apps one of the react native team the thing that was really exciting to me is that we're giving you access to all platform capabilities so if I just using a simple web component you get access to the real platform specific components like us call view or scroll view widget on Android this is the phrase I've heard many many times from different people at Facebook that medium may need 10 times more productive so I built this scientific drop explaining this this time it takes to build it out or build iOS app and then Android maybe takes a little longer inject native is like haben 10% a file however I drag native user now I understand that after 10% of time the app is not done it's functional it's a paradise it's real fun to play with and see it real but it's not quite done and it has to be has to deal with some specifics of mobile platform it's just that building for mobile platform is different than building from for web and I've seen the situation many many times edge Facebook an outside space with people from with web experience come into react native ecosystem they see all these components that seem very familiar like it's really clear how to use these things you know everything is react so it's simple they put this component inter mobile app and I happy about this and it's great because they created something that didn't exist before however if you put this up through the brain machine usually the results turns out like something is wrong like you can't really tell what but there is something that just doesn't feel right hopefully today I'm sure I'm going to show you how to arrange some of these components and configure it in the right special way and using some knowledge and some magic that will result in a good outcome I'm going to talk to you about these five things all these things are super simple if you are expecting some like groundbreaking you know information it's like these things are very simple but they are not obvious if you are coming from web in the end I'm going to share the main secret to build an amazing app with that native but we're starting with text input text inputs on web is the thing that just works Islamic form you put few inputs there and everything is fine your computer has a physical keyboard attached to it Tom key facilities like fast switch between those things and just works by default your browser can autocomplete your email address or password and stuff like that this will convenient so let's say you're building an Instagram login flow and you want to create this form and there is text input so your initial implementation might look like this just text input with some styles and handle the input event you put it on a simulator and it works just fine you're tested you know everything's great you can log in great however running the same app on a mobile device will give you a completely different experience it just it's going to be somewhat clunky and want to feel great and again this goes back to the fact that just spending 10% of the time doesn't mean the app is completely done so if you look at the mobile development and all the all these little details you will notice that usually you want to outer focus the first - very user extra top you wanna use placeholders to highlight what those things are keyboard is a software keyboard so it occupies space on the screen so you have to care and be careful not to cover important elements like a log in with Facebook button here you have to know how to dismiss keyboard how to configure each text input to you know use or not use spell checking out the capitalization you can customize keyboard type tool for example make it easier to enter email addresses and you can also program this return key that can do whatever you want so again back to the code that native actually gives you the full power of all platforms at you to your disposal so you can you know configure it precisely the way it must be like select any keyboard appearance placeholders outer part or capitalization outer correct keyboard type return key program the return key this means the key etc wow this might seem overwhelming and it is because your head is provided the full power and you can easily abstract this away in your company specific email input that does everything right and hide this complexity coming up next is direct manipulation what I mean by that is that when you have a mouse attached to a computer you directly manipulating this piece of hardware and this piece of power is connected to a thing on the screen which is a cursor and cursor is great it's very precise it's pixel perfect it shows you feedback when something is actionable or editable it also tells you one we can do is be be doing some stuff and won't accept your inputs well it all goes out of the window when you go to mobile devices and the way touchscreen works is that it creates this illusion of direct manipulation instead of having at this upon layer that connects to a pointer you directly manipulated stuff on your screen and this has four main implications first we need instant feedback imagine you have a notebook and ten and you start driving something but there is a delay between you do something and you see a line appear on the paper it was so very weird junkie and you know after some time it is just unusable well to result on mobile devices mobile browsers at 350 milliseconds delay to each tab interaction and there are good reasons they do that but I think that contributes a lot to the perception of mobile being slow on where Canadians use all the touchable things that you can wrap your components and they usually do the right thing so definitely use them next up physics again another example you have a basketball basketball ball and you drop it on the floor and it slides like this and the dunce doesn't bounce back again something is really fishy here it just still drawn so when you are building animations with rekha native make sure that you customize those things to simulate real physical processes not just some random values that kind of look good something that feels good Big Shot out here too weak for building react native instructable this thing is basically physics engine running on your phone with access to direct media that you can use to program your stuff this is where the 60fps is really important like when you drop a frame this great the illusion of direct manipulation and that creates this feeling of junky mess and not feeling right again rec native provides this use native driver thing that you should use to make sure that all animations are not stopped by JavaScript also there is interaction manager module that you can use to coordinate your complex computations and to not interrupt touch and animations next up touch targets so imagine you have this up and you want to tap the search icon it's actually so small I'm not sure you in the back series but and user fingers are pretty big for the screen it's really hard to you know sit directly on that icon so the way mobile platforms I work on this issue is that they make the top target of the items and burns much larger than they appear so this is example from Google material design where the top target is four times as big as the item itself react native supports all of that you can set in slope when you touch touchable component to make sure that they're easily accessible that native also ships with a touchable inspector so if you turn on an inspector in this option it will highlight all touchable with their ships load so you can see directly how big they are and last but not least ability to cancel interactions this is a very complex topic I need like deserves definitely a separate talk I'm just going to show you one example of how this works for by default for the balance so when you push the button but slide away and release the top is canceled so this ability of canceling your direct manipulation is really important the ability to like go back or cancel whatever you doing if you are building your custom gestures this is really really important coming up next animation in spatial awareness as human beings we evolve in three-dimensional space and we have this feeling of things around us so for example I don't see the screen behind me but I still know it's there we use this concept in the desktop a lot so for example I have two folders on my desktop and if they're getting covered by some window like Spotify I still know they're there they under the window which is a ridiculous thing because the UI is two-dimensional but we have this like spatial awareness still built in however all desktop applications they have the luxury of running on the large screen the same abstraction will just not work for mobile it is just not enough space and we're not good at seeing tiny little details so the way it works and Mobile is the apps pretend to have a much larger surface than you can see on the screen so for example in the same it pretends that aesthetically it is big much bigger than the screen and it lets users manipulate this list to see only the parapet but it's not only about the scrolling so here is animations that are used on iOS when you open up a folder so close them you see where the apps coming from and where they go on and really the concept of shared element transition where the same element appears on both screens and it gives you kind of the feeling of where things are where they moving and the point of all this is that animation is not a luxury this is not something you sprinkle on top of your averages make it so great animation is a vital tool for establishing spatial awareness another thing that facilitates the spatial awareness is the ability to go back on iOS swipe is usually used to go back or the back button that is in top left Android is slightly different they have what they call a hardware back button that is not Hardware anymore but it's still there and users have very specific expectations of what this button does and what it should do to your up here is an example of the chain react app and it's a great app and like the world is much better with this update without it it's just that it has one of these small details let's say you are expending a map view and then pressing back it takes you back to the first tab even though the expectations for Android user is to collapse them up back it's like a subtle detail and you would expect it you know to behave one way and then it behaves the other way and it just stops a little wrong so those little details they matter a lot next up loaded state so whether it's mostly about the pages of content this is to act native web documentation page and I'm just going to start load-in it so I should enter the URL bar I see something coming up on this screen and then items Lord fun flawed some more content Lords and it was okay but for the web it's great it's just normal it's it matches your expectations of web however on mobile it's more nuanced so let's say you have this up where you have list of tasks and the topic details and you want to transition from one to another your initial naive implementation will be something like this you'll create a component that takes the task ID and when this component is mounted you fetch the task detail and while this is special you are showing their activity indicator because literally you don't have any data to put on the screen and it looks like this you tap something and it's loading on the full screen in your app is basically empty for some time and then join and and the experience is met it's functional it's great that you know you will we were able to do this in short time but the resulting experience is just not awesome if you look at other examples of this and how it's done right on face book out for example when you tap a profile you get profile information right away it looks like magic and it took me some time to figure out what's going on but it actually make sense so the way they do it if you wanted those two screams a lot of data is actually shared like task owner title priority and stuff like that already known to the list so what we can do is we can pass these details as an object to the detailed view and then render it before the data comes back so we have something to show and in this content is enough to render at least first half of the clean the transition will fill instant another called detail would do is we could start loading the data even before the touch actually happened on the touch star demand and this is really cool this symbolize after 500 milliseconds of you know animating prochaine animating again and by the time if your server is good you will receive the response and it will fill instance the way I like to think about these things is you're kind of training some developer experience for the user experience you have to go out of your comfort zone and maybe use some frameworks in a way that wasn't intended but the result is much better user experience back to the million dollar question which library should use I think the point of my talk is that it doesn't matter as a direct native developer I spent three years building regular and I would hate for people to come in and be limited by the framework don't compromise your user experience by the frameworks you choose if something doesn't pick your ideal image of the app just like go around it extended and so for UI library so a paragraph some people to build Facebook standard components in their native for other people to use and they came back with this like building with retina is so easy we don't need standard components and it's it sounds appealing like if you look at the button implementation of it could be very simple it's just touchable opacity with some text it sounds really cool simple again it's 10% of the time doesn't mean it's hundred percent done think about cross-platform how this button looks on different platforms what about disabled state items fixes height and heat slope text wrapping accessibility and consistency with other controls those things are real hard to get tried so the we will recommend using or building your own standard controls and for companies like Facebook they will then be and others will already build our own libraries of components that other people use the beauty of this approach is that very well designed and build basic components which is so much easier to build amazing apps all these little details just work fine and all you need to do is compose them in the right way so we're just about all these five things what they have in common is to see them you have to experience it on the real device you have to run your app not only similar the rural iPhone or Android animations and gears are essential tools they're not watching and sometimes you have to go beyond what frameworks provide guides maybe some native code or use something that is not considered good practice in relax all of these things I talked about they're not rocket science in fact you don't even need a human-computer interaction degree to understand those things they're simple however I was looking for resources on that and I couldn't find some I think the reason is partially because this knowledge is built into the experience of native developers for them its nature like they know these things even without realizing they're an ornament but if you are coming from web it might be a little bit challenging to like get all the things right so grant and I are added in this new section to react native the communication that we'll have always small snippets a little detail feel free to contribute to that as well but most importantly you have to learn to see these things you can read about all this for a long time but just start noticing it it will come a current and you will once you learn to see it it's going to be much much easier so back to the main secret of building amazing apps would be that leader is you have to care you have to care about user experience deeply truly care and this slide doesn't have designers have to care because if you look at the designer tools they actually great for drawing dead fish definitely look at a breath Victor stock he argues that August two-dimensional flat things they are frozen in time they're not interactable it's really hard to design proper user experience with just these tools all these little details I talked about that should be they contribute to the quality and this quality is our responsibility the developers are responsible for the quality of the app not designers not the users not the peer it's important because quality defines different sessions our businesses imagine Twitter apps being a very city up nobody would use it and Twitter will go down like it's very important for your business value to have amazing our presence but what's even more interesting and important for this conference is that the quality of the apps we build with react native defines the perception of your native ecosystem at the fall so as the magnet of developers and contributors I'd like us to focus on building the pit of success we need to build this little detail into the basic component so that the default way is the right way so it's easier to build amazing experiences we also need to talk more about us so if you are preparing the conference submitting a talk or doing the read native training include some stuff about user experience into your materials and we need more great examples of the apps build with attention to detail so on the second floor is a coffee station I'm going to hang out here there if you have any questions with that thank you very much [Applause]

Channel: Coding Tech

Views: 74,883

Keywords: reactjs, react native, javascript, hybrid apps, user experience, ux, mobile ux, web development, mobile development

Id: ssXB9RMTpTs

Length: 20min 45sec (1245 seconds)

Published: Sun Jul 30 2017