{"id":33510,"date":"2021-09-01T15:23:42","date_gmt":"2021-09-01T19:23:42","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=33510"},"modified":"2021-09-01T15:23:42","modified_gmt":"2021-09-01T19:23:42","slug":"on-the-shift-from-imperative-to-declarative-ui","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2021\/09\/01\/on-the-shift-from-imperative-to-declarative-ui\/","title":{"rendered":"On the Shift From Imperative to Declarative UI"},"content":{"rendered":"<p><a href=\"https:\/\/increment.com\/mobile\/the-shift-to-declarative-ui\/\">Peter Steinberger<\/a> (<a href=\"https:\/\/twitter.com\/steipete\/status\/1432943157579296768\">tweet<\/a>):<\/p>\n<blockquote cite=\"https:\/\/increment.com\/mobile\/the-shift-to-declarative-ui\/\"><p>The trend of declarative UI on mobile began in 2013 with React Native, which started as a Facebook hackathon project. The goal was to improve the developer experience by bringing everything people loved about the web&mdash;rapid development, instant reload, platform agnosticism&mdash;to mobile. The first major declarative UI framework, React Native offered a way to build cross-platform apps with very little platform-specific code.<\/p><p>[&#8230;]<\/p><p>Today, React Native is a polarizing framework. Some companies are dropping it (<a href=\"https:\/\/medium.com\/airbnb-engineering\/react-native-at-airbnb-f95aa460be1c\">like Airbnb<\/a>), while others are doubling down (<a href=\"https:\/\/blog.coinbase.com\/announcing-coinbases-successful-transition-to-react-native-af4c591df971\">like Coinbase<\/a>).<\/p><p>[&#8230;]<\/p><p>Google had similar ambitions to bring web development concepts to mobile, although it took a different approach. <a href=\"https:\/\/twitter.com\/_eseidel\/status\/1390699829207080963?s=21\">Flutter started as a fork of Chrome<\/a> animated by the question, &ldquo;How fast could we go if we dropped all that backward compatibility from the web?&rdquo; [&#8230;] This didn&rsquo;t always work out&mdash;especially on iOS, where <a href=\"https:\/\/thomasmiddel.medium.com\/flutter-its-poor-ios-performance-84ec1eacd235\">the infamous &ldquo;jank&rdquo; problem<\/a> (choppy animations on first render) hurt the experience, though <a href=\"https:\/\/github.com\/flutter\/engine\/pull\/25644\">a recent release<\/a> has resolved the issue.<\/p><p>[&#8230;]<\/p><p>With this in mind, Apple and Google created their own &ldquo;first-party&rdquo; solutions, SwiftUI and Jetpack Compose. Both were announced in 2019 and are <a href=\"https:\/\/pspdfkit.com\/blog\/2021\/swiftui-in-production\/\">now becoming production ready<\/a>.<\/p><p>[&#8230;]<\/p><p>Despite their structural similarities, Jetpack Compose tends to be easier to adopt than SwiftUI. Whereas Google distributes Compose as a library that works on every Android version down to 5.0 (released in 2014), most apps that adopt SwiftUI need to target iOS 14 (released in 2020) or later.<\/p><\/blockquote>","protected":false},"excerpt":{"rendered":"<p>Peter Steinberger (tweet): The trend of declarative UI on mobile began in 2013 with React Native, which started as a Facebook hackathon project. The goal was to improve the developer experience by bringing everything people loved about the web&mdash;rapid development, instant reload, platform agnosticism&mdash;to mobile. The first major declarative UI framework, React Native offered a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"2021-09-01T19:23:46Z","apple_news_api_id":"d1435f9b-a75a-49a1-89ae-f5b6378651a6","apple_news_api_modified_at":"2021-09-01T19:23:47Z","apple_news_api_revision":"AAAAAAAAAAD\/\/\/\/\/\/\/\/\/\/w==","apple_news_api_share_url":"https:\/\/apple.news\/A0UNfm6daSaGJrvW2N4ZRpg","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[4],"tags":[248,31,1837,71,1812],"class_list":["post-33510","post","type-post","status-publish","format-standard","hentry","category-programming-category","tag-android","tag-ios","tag-ios-14","tag-programming","tag-swiftui"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/33510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=33510"}],"version-history":[{"count":1,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/33510\/revisions"}],"predecessor-version":[{"id":33511,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/33510\/revisions\/33511"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=33510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=33510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=33510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}