• Introducing AloeStackView for iOS
  • Written by Marli Oshlack
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: LoneyIsError
  • Proofread by: Weslie

A simple open source class that lays out a collection of views through some convenient apis.

In the Airbnb iOS APP, about 200 pages were built using AloeStackView.

At Airbnb, we’re always looking for ways to make building products more efficient.

Over the past few years, our mobile development efforts have grown at an incredible rate. In the past year alone, we’ve added more than 260 pages to our iOS apps. At the same time, more and more people are using our native mobile apps. The trend shows no signs of slowing down.

About two years ago, we talked at length about how we would build our product on iOS to see if there was room to be more productive. One of the main issues we found was that it took days or even weeks of development to implement a new page in our iOS app.

So we set out to change that. We wanted to find a way to build pages as quickly as possible. We want engineers to be able to add new pages to iOS apps in minutes or hours, not days or weeks.

Over the past two years, we’ve learned a lot about building high-quality iOS UIs quickly.

With some of that knowledge in mind, we’re excited today to introduce a tool in our Airbnb development process to help you write iOS UI quickly, easily, and efficiently.

AloeStackView profile

At Airbnb, we started using AloeStackView in our iOS app in 2016 and have used it to implement nearly 200 pages in the app. The use cases are very diverse: from setting up the use of pages to creating new lists to list-like action shells (such as UIActionSheet).

AloeStackView is a class that allows you to lay out a collection of views in a vertical list. In a broad sense, it’s similar to UITableView, but its implementation is completely different, and it makes different trade-offs.

AloeStackView first focuses on making the UI very fast, simple and straightforward to implement. It does this in two ways:

  • It takes advantage of the power of automatic layout to automatically update the UI as views change.
  • It abandons some of the features of UITableView, such as view recycling, in favor of a simpler, more secure API.

Simplify iOS UI development

When we looked at how to make iOS development more efficient, one of the first things we realized was how much work was required to achieve the smallest pages in the application.

It turns out that introducing abstractions designed to handle large and complex pages can sometimes be a burden on smaller pages.

Typically, smaller pages do not benefit from the benefits these abstractions provide. For example, if the UI fits perfectly into a single page, it will not benefit from view recycling. Obviously, if we use abstraction around view recycling to build individual pages, we have to pay for the added API complexity of this capability.

To solve this problem, we first looked for simpler ways to write pages. One technique we have found to be very effective is to use UIStackView nested in UIScrollView to lay out the page. This approach became the basis for building AloeStackView.

What makes this technology so useful? It allows you to keep strong references to a view and dynamically change its properties at all times, while automatic layout automatically keeps the UI up to date.

At Airbnb, we’ve found that this technology works well for pages that accept user input, such as forms. In these cases, it’s often convenient to keep strong references to the fields the user is editing and update the UI directly with validation feedback.

Another place we find this technique useful is on smaller pages made up of different views, less than one or two pieces of content. Simply declaring a list of views in the UI in a simple way often makes implementing these screens faster and easier.

In practice, we find that a large number of pages in iOS applications fall into these categories. AloeStackView’s simple and flexible API allows us to quickly and easily build multiple pages, making it a useful tool in our toolbox.

Reduce bugs

Another way we can improve developer productivity is to focus on making iOS UI development easier to do right. The main goal of the AloeStackView API is to ensure security through design so that engineers spend more time building products and less time tracking bugs.

AloeStackView does not have a reloadData method or any other way to notify it of changes to the view. This makes it less error-prone and easier to debug than classes like UITableView. For example, AloeStackView will never crash due to changes to the underlying data of the views it manages.

Because AloeStackView uses UIStackView underneath, it does not reclaim the view when scrolling. This eliminates a common error caused by improperly recycling views. It also provides the added advantage of not having to maintain view state independently when the user interacts with them. This can make some OF the UI easier to implement and reduce the surface areas where errors can spread.

Weigh the pros and cons

While AloeStackView is convenient and practical, we found that it is not suitable for all situations.

For example, AloeStackView lays out the entire UI at once when you load the screen. As a result, longer screens will see a delay before the UI is first displayed. Therefore, AloeStackView is better suited to UI implementations with less than one or two contents.

Abandoning view recycling is also a trade-off: While AloeStackView is faster and less error-prone to write UI, it does not perform well and uses more memory for longer pages than classes like UITableView. Therefore, classes like UITableView and UICollectionView are still good choices for presenting pages that contain many views of the same type, all presenting similar data.

Despite these limitations, we found AloeStackView to be well suited for a large number of use cases. AloeStackView proved to be very efficient and efficient in implementing the UI and helped us achieve our goal of improving iOS development efficiency.

Keep code manageable

One problem that often results from the introduction of third-party dependencies is an increase in the size of binary packages. This is exactly what we wanted to avoid with AloeStackView. The entire library is less than 500 lines of code, with no external dependencies, which minimizes the increase in binary package size.

A small amount of code helps in other ways besides taking up less space: it makes libraries easier to understand, faster to integrate into existing applications, and easier to contribute without debugging.

Another problem is that sometimes there is a mismatch between libraries that have dependencies on third parties and the way your application currently works. To mitigate the problem, AloeStackVie restricts its use as little as possible. Any UIView can be used with AloeStackView, which allows you to easily integrate with whatever patterns you’re currently using to build UI in your application.

All of these features combine to make AloeStackView a very easy and risk-free trial. If you are interested, please give it a try and let us know what you think.

AloeStackView is not the only infrastructure we use to build our iOS UI on Airbnb, but it has been valuable to us in many cases. We hope you found it useful too!

Start your usage

We are happy to open source AloeStackView. For more information, visit GitHub Repository.

If you or your company find this library useful, we would love to hear from you. If you would like to get in touch, please feel free to email the maintenance staff (you can find us on GitHub) or you can contact us at [email protected].

Want to get involved? We’re always lookingTalented people join our team!

AloeStackView was developed and maintained by Marli Oshlack, Fan Cox and Arthur Pang.

AloeStackView also benefits from the contributions of many Airbnb engineers: Daniel Crampton, Francisco Diaz, David He, Jeff Hodnett, Eric Horacek, Garrett Larson, Jasmine Lee, Isaac Lim, Jacky Lu, Noah Martin, Phil Nachum, Gonzalo Nunez, Laura Skelton, Cal Stephens and Ortal Yahdav.

Furthermore, without the help and support of Jordan Harband, Tyler Hedrick, Michael Bachand, Laura Skelton, Dan Federman, and John Pottebaum, It’s impossible to open source the project.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.