Instagram engineers teach you how to improve app performance

"Editor's note" Flat design because of its concise appearance, fewer buttons and options to make the interface clean and tidy, thereby reducing the emergence of cognitive impairment. Flat design is more functional simplification and reorganization, compared to the proposed materialization, the flat style of an advantage is that it can be more simple and direct information and the way things work. This article is from the Instagram an engineer to share.

The following is the translation:

is flat design just a nice look or a performance tool that triggers a UI revolution? Practice proved to be the latter.

Tyler Kieft, an engineer at Instagram, explains the reasons for this, with a more detailed description of his speech at the @scale meeting: Instagram on standard Android phones. The speech, provided by Facebook, is part of the "How to design mobile apps in the real World" series, where the "real world" refers to places with slower phones, smaller screens and slower networks than the United States.

The Instagram team needs to rethink the design of apps and high-end handsets for standard handsets. One of the revelations from Tyler's conversation was to switch to flat design, which would make the application more beautiful, more practical, and significantly more performance.

This is really beyond my expectation, and I used to think that flat design was just building a more aesthetically pleasing UI. It's stupid to think about it now. Thanks to Tyler for explaining the benefits of the flat design in such detail, Instagram explains everything.

Flat design is a reverse materialization, it uses simple elements, simple typesetting, monotonous color and simple design.

With flat design, Instagram can reduce the cold start time of MS, while the application is more aesthetically pleasing, and more focused on delivering content to different sizes of handsets.

So how is flat design achieved?

transition to Flat design

to focus on performance, Instagram rewrite their UI. When Instagram launched the Android version in 2012, only 3 people had a team that took about 4 months to complete. Two of them are engineers, a designer. The Android version uses the same design as the iOS version. Use rich gradient features and a large number of UI elements. After the transition to flat design, the product is simpler and more beautiful. No more gradients, no more shadows. By adopting flat design, they get the experience:

It's good news for developers that flat designs make them smaller, develop code faster, and update products faster. Flat design brings a performance boost, not only by developers doing less, but faster.

The goal of

's new Android version is to use the experience they learned from the iOS7 flat design:

makes it flatter and faster. This is not an override, the navigation mode has not changed. Have a strong sense of screen space. Take a fresh look at each screen and try to make the design better suited to all the screen sizes. Make it more beautiful. This is the basis of what the Instagram team does.

The overall effect has been significantly simplified, so what happened?

Remove all gradient and smooth buttons. Let the icon return to the sharp outline, replacing the gradient effect. Preserves solid colors and flat shapes so that the UI fits into the background. Remove the comment icon so that the comment occupies the full width of the screen, giving comments more text space. Emphasis on the screen, so that small screen mobile phone users have more room to read the body content. Re-layout of the photo function. On a small cell phone, the action button is designed at the top of the screen, while the large screen phone commands all at the bottom. The unnecessary UI on the app is all removed, allowing users to focus more on the content. The Chrome search screen is reduced from three to two layers. This gives the small cell phone a lot of space, to content a lot of space.

Why flat design

apk will be smaller, which is ideal for small networks. The Magic is asset tinting (something I've never heard of). Asset tinting means assets, in which case it is an image and can be colored programmatically. For example, a gray heart can be changed to red programmatically. Load less assets. This means that the UI displays faster and stores bitmaps with less memory. Each assets that needs to be displayed must be read in Flash and decoded into a bitmap. The less you do this, the faster the app will be. Faster iteration time. If you want to change the color or redevelopment, you don't need a designer anymore, need to change the code and compile. Result:

Before flattening the design, 29 different assets are required to display the feed screen. After the flat design, only 8 of them were used. With these, the cold start time of the MS on all devices is lost. After the flat design, the entire app is faster. Fewer assets are loaded and the entire app becomes more agile and faster.

improve cold start time

Cold start time refers to the time the application starts and responds. The goal is to make the application start faster and give users a good experience on low-end handsets. A few years ago, on the low-end Samsung y series mobile phone Instagram start time is 3 seconds, on high-end Samsung S5, start-up time is 750 Ms. Now it takes 1.5 seconds for the Instagram to start on the Samsung Y series. On Samsung S5 is Ms. How do you do it?

configures the app.

find out what slows down the app's speed. On Android You can use method tracing and timing statements, both of which will work twice as well.

repair the slowest part.

delay loading. Deletes the item from the cold boot path. Rewrite the code. For example, a slow JSON parsing code can be rewritten faster. Follow the background thread. What can be done in the background is not done on the UI thread.

iterations. Start the configuration step again.

The

app-wide single case pattern was found to be slow.

many severe single case modes start with app: HTTP client, cookie storage, image cache, video cache. Really don't need these things to show the UI to the user. They can be loaded in parallel in the background. Two-part Delay Loading

Initialize the single case pattern in the background, and do not allow the programmer to check whether a single case pattern is available.

Create enough objects on the UI thread to perfect the public API functionality. Use Kung fu on a background thread. Caching is opened and read from disk storage, and client certificates are loaded in the background. Cookies are deserialized and decoded in the background. With these changes, the UI will appear more quickly on the screen.

Newsview slows down. Found by method tracing.

Newsview, showing all your preferences and comments, was originally written as WebView. It needs to be loaded at startup to display user data as quickly as possible. The problem is that there is no control webview, it has its own stack and caching system. It takes 2-4 weeks to convert to local. The cold start time after local conversion decreased by 30%.

Experience

Fast cold start time is achievable through configuration, repair, and iteration. Use pixels carefully. See what every screen doesn't need. Other countries have a significantly smaller screen than the U.S. Mobile phones like simple designs, as do mobile developers, who prefer simpler, faster designs.

original link: Instagram improved misspelling App ' s configured. Here's how. (Zebian/Wei)