diff --git a/SwiftUITalk.xcodeproj/project.pbxproj b/SwiftUITalk.xcodeproj/project.pbxproj
new file mode 100644
index 0000000..79d8281
--- /dev/null
+++ b/SwiftUITalk.xcodeproj/project.pbxproj
@@ -0,0 +1,423 @@
+// !$*UTF8*$!
+{
+	archiveVersion = 1;
+	classes = {
+	};
+	objectVersion = 50;
+	objects = {
+
+/* Begin PBXBuildFile section */
+		F6D5673F234E340500D0417B /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = F6D5673E234E340500D0417B /* AppDelegate.swift */; };
+		F6D56741234E340500D0417B /* SceneDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = F6D56740234E340500D0417B /* SceneDelegate.swift */; };
+		F6D56743234E340500D0417B /* LoginView.swift in Sources */ = {isa = PBXBuildFile; fileRef = F6D56742234E340500D0417B /* LoginView.swift */; };
+		F6D56745234E340700D0417B /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = F6D56744234E340700D0417B /* Assets.xcassets */; };
+		F6D56748234E340700D0417B /* Preview Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = F6D56747234E340700D0417B /* Preview Assets.xcassets */; };
+		F6D5674B234E340700D0417B /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = F6D56749234E340700D0417B /* LaunchScreen.storyboard */; };
+		F6D56755234F1B9F00D0417B /* BlogListView.swift in Sources */ = {isa = PBXBuildFile; fileRef = F6D56754234F1B9F00D0417B /* BlogListView.swift */; };
+		F6D56757234F1C3100D0417B /* Post.swift in Sources */ = {isa = PBXBuildFile; fileRef = F6D56756234F1C3100D0417B /* Post.swift */; };
+		F6D56759234F1C3600D0417B /* Posts.json in Resources */ = {isa = PBXBuildFile; fileRef = F6D56758234F1C3600D0417B /* Posts.json */; };
+		F6D5675B234F1C4200D0417B /* DataService.swift in Sources */ = {isa = PBXBuildFile; fileRef = F6D5675A234F1C4200D0417B /* DataService.swift */; };
+		F6E31D78234F41CB00EA19C4 /* index.html in Resources */ = {isa = PBXBuildFile; fileRef = F6E31D77234F41CB00EA19C4 /* index.html */; };
+		F6E31D7C234F41EA00EA19C4 /* WebView.swift in Sources */ = {isa = PBXBuildFile; fileRef = F6E31D7B234F41EA00EA19C4 /* WebView.swift */; };
+		F6E31D7E234F43D500EA19C4 /* PostDetailView.swift in Sources */ = {isa = PBXBuildFile; fileRef = F6E31D7D234F43D500EA19C4 /* PostDetailView.swift */; };
+		F6E31D82234F4BB000EA19C4 /* Post+Decodable.swift in Sources */ = {isa = PBXBuildFile; fileRef = F6E31D81234F4BB000EA19C4 /* Post+Decodable.swift */; };
+		F6E31D84234F4BCA00EA19C4 /* Author.swift in Sources */ = {isa = PBXBuildFile; fileRef = F6E31D83234F4BCA00EA19C4 /* Author.swift */; };
+		F6E31D86234F527B00EA19C4 /* AuthorView.swift in Sources */ = {isa = PBXBuildFile; fileRef = F6E31D85234F527B00EA19C4 /* AuthorView.swift */; };
+		F6E31D88234F58B500EA19C4 /* AuthorsGridView.swift in Sources */ = {isa = PBXBuildFile; fileRef = F6E31D87234F58B500EA19C4 /* AuthorsGridView.swift */; };
+/* End PBXBuildFile section */
+
+/* Begin PBXFileReference section */
+		F6D5673B234E340500D0417B /* SwiftUITalk.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = SwiftUITalk.app; sourceTree = BUILT_PRODUCTS_DIR; };
+		F6D5673E234E340500D0417B /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
+		F6D56740234E340500D0417B /* SceneDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SceneDelegate.swift; sourceTree = "<group>"; };
+		F6D56742234E340500D0417B /* LoginView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LoginView.swift; sourceTree = "<group>"; };
+		F6D56744234E340700D0417B /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
+		F6D56747234E340700D0417B /* Preview Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = "Preview Assets.xcassets"; sourceTree = "<group>"; };
+		F6D5674A234E340700D0417B /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
+		F6D5674C234E340700D0417B /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+		F6D56754234F1B9F00D0417B /* BlogListView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BlogListView.swift; sourceTree = "<group>"; };
+		F6D56756234F1C3100D0417B /* Post.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = Post.swift; sourceTree = "<group>"; };
+		F6D56758234F1C3600D0417B /* Posts.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = Posts.json; sourceTree = "<group>"; };
+		F6D5675A234F1C4200D0417B /* DataService.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = DataService.swift; sourceTree = "<group>"; };
+		F6E31D77234F41CB00EA19C4 /* index.html */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.html; path = index.html; sourceTree = "<group>"; };
+		F6E31D7B234F41EA00EA19C4 /* WebView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WebView.swift; sourceTree = "<group>"; };
+		F6E31D7D234F43D500EA19C4 /* PostDetailView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PostDetailView.swift; sourceTree = "<group>"; };
+		F6E31D81234F4BB000EA19C4 /* Post+Decodable.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Post+Decodable.swift"; sourceTree = "<group>"; };
+		F6E31D83234F4BCA00EA19C4 /* Author.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Author.swift; sourceTree = "<group>"; };
+		F6E31D85234F527B00EA19C4 /* AuthorView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AuthorView.swift; sourceTree = "<group>"; };
+		F6E31D87234F58B500EA19C4 /* AuthorsGridView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AuthorsGridView.swift; sourceTree = "<group>"; };
+/* End PBXFileReference section */
+
+/* Begin PBXFrameworksBuildPhase section */
+		F6D56738234E340500D0417B /* Frameworks */ = {
+			isa = PBXFrameworksBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXFrameworksBuildPhase section */
+
+/* Begin PBXGroup section */
+		F6D56732234E340500D0417B = {
+			isa = PBXGroup;
+			children = (
+				F6D5673D234E340500D0417B /* SwiftUITalk */,
+				F6D5673C234E340500D0417B /* Products */,
+			);
+			sourceTree = "<group>";
+		};
+		F6D5673C234E340500D0417B /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				F6D5673B234E340500D0417B /* SwiftUITalk.app */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		F6D5673D234E340500D0417B /* SwiftUITalk */ = {
+			isa = PBXGroup;
+			children = (
+				F6D5673E234E340500D0417B /* AppDelegate.swift */,
+				F6D56740234E340500D0417B /* SceneDelegate.swift */,
+				F6D5675C234F1C4A00D0417B /* Views */,
+				F6E4CB1C235DA1E600C71E3B /* Models */,
+				F6E4CB1D235DA1F500C71E3B /* Services */,
+				F6D5675D234F1C5800D0417B /* Extensions */,
+				F6D56758234F1C3600D0417B /* Posts.json */,
+				F6E31D77234F41CB00EA19C4 /* index.html */,
+				F6D56744234E340700D0417B /* Assets.xcassets */,
+				F6D56749234E340700D0417B /* LaunchScreen.storyboard */,
+				F6D5674C234E340700D0417B /* Info.plist */,
+				F6D56746234E340700D0417B /* Preview Content */,
+			);
+			path = SwiftUITalk;
+			sourceTree = "<group>";
+		};
+		F6D56746234E340700D0417B /* Preview Content */ = {
+			isa = PBXGroup;
+			children = (
+				F6D56747234E340700D0417B /* Preview Assets.xcassets */,
+			);
+			path = "Preview Content";
+			sourceTree = "<group>";
+		};
+		F6D5675C234F1C4A00D0417B /* Views */ = {
+			isa = PBXGroup;
+			children = (
+				F6D56742234E340500D0417B /* LoginView.swift */,
+				F6D56754234F1B9F00D0417B /* BlogListView.swift */,
+				F6E31D7D234F43D500EA19C4 /* PostDetailView.swift */,
+				F6E31D85234F527B00EA19C4 /* AuthorView.swift */,
+				F6E31D7B234F41EA00EA19C4 /* WebView.swift */,
+				F6E31D87234F58B500EA19C4 /* AuthorsGridView.swift */,
+			);
+			path = Views;
+			sourceTree = "<group>";
+		};
+		F6D5675D234F1C5800D0417B /* Extensions */ = {
+			isa = PBXGroup;
+			children = (
+				F6E31D81234F4BB000EA19C4 /* Post+Decodable.swift */,
+			);
+			path = Extensions;
+			sourceTree = "<group>";
+		};
+		F6E4CB1C235DA1E600C71E3B /* Models */ = {
+			isa = PBXGroup;
+			children = (
+				F6D56756234F1C3100D0417B /* Post.swift */,
+				F6E31D83234F4BCA00EA19C4 /* Author.swift */,
+			);
+			path = Models;
+			sourceTree = "<group>";
+		};
+		F6E4CB1D235DA1F500C71E3B /* Services */ = {
+			isa = PBXGroup;
+			children = (
+				F6D5675A234F1C4200D0417B /* DataService.swift */,
+			);
+			path = Services;
+			sourceTree = "<group>";
+		};
+/* End PBXGroup section */
+
+/* Begin PBXNativeTarget section */
+		F6D5673A234E340500D0417B /* SwiftUITalk */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = F6D5674F234E340700D0417B /* Build configuration list for PBXNativeTarget "SwiftUITalk" */;
+			buildPhases = (
+				F6D56737234E340500D0417B /* Sources */,
+				F6D56738234E340500D0417B /* Frameworks */,
+				F6D56739234E340500D0417B /* Resources */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+			);
+			name = SwiftUITalk;
+			productName = SwiftUITalk;
+			productReference = F6D5673B234E340500D0417B /* SwiftUITalk.app */;
+			productType = "com.apple.product-type.application";
+		};
+/* End PBXNativeTarget section */
+
+/* Begin PBXProject section */
+		F6D56733234E340500D0417B /* Project object */ = {
+			isa = PBXProject;
+			attributes = {
+				LastSwiftUpdateCheck = 1110;
+				LastUpgradeCheck = 1110;
+				ORGANIZATIONNAME = "QuickBird Studios GmbH";
+				TargetAttributes = {
+					F6D5673A234E340500D0417B = {
+						CreatedOnToolsVersion = 11.1;
+					};
+				};
+			};
+			buildConfigurationList = F6D56736234E340500D0417B /* Build configuration list for PBXProject "SwiftUITalk" */;
+			compatibilityVersion = "Xcode 9.3";
+			developmentRegion = en;
+			hasScannedForEncodings = 0;
+			knownRegions = (
+				en,
+				Base,
+			);
+			mainGroup = F6D56732234E340500D0417B;
+			productRefGroup = F6D5673C234E340500D0417B /* Products */;
+			projectDirPath = "";
+			projectRoot = "";
+			targets = (
+				F6D5673A234E340500D0417B /* SwiftUITalk */,
+			);
+		};
+/* End PBXProject section */
+
+/* Begin PBXResourcesBuildPhase section */
+		F6D56739234E340500D0417B /* Resources */ = {
+			isa = PBXResourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				F6E31D78234F41CB00EA19C4 /* index.html in Resources */,
+				F6D5674B234E340700D0417B /* LaunchScreen.storyboard in Resources */,
+				F6D56748234E340700D0417B /* Preview Assets.xcassets in Resources */,
+				F6D56745234E340700D0417B /* Assets.xcassets in Resources */,
+				F6D56759234F1C3600D0417B /* Posts.json in Resources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXResourcesBuildPhase section */
+
+/* Begin PBXSourcesBuildPhase section */
+		F6D56737234E340500D0417B /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				F6E31D7E234F43D500EA19C4 /* PostDetailView.swift in Sources */,
+				F6E31D88234F58B500EA19C4 /* AuthorsGridView.swift in Sources */,
+				F6D56755234F1B9F00D0417B /* BlogListView.swift in Sources */,
+				F6E31D7C234F41EA00EA19C4 /* WebView.swift in Sources */,
+				F6D5675B234F1C4200D0417B /* DataService.swift in Sources */,
+				F6E31D86234F527B00EA19C4 /* AuthorView.swift in Sources */,
+				F6D5673F234E340500D0417B /* AppDelegate.swift in Sources */,
+				F6E31D84234F4BCA00EA19C4 /* Author.swift in Sources */,
+				F6E31D82234F4BB000EA19C4 /* Post+Decodable.swift in Sources */,
+				F6D56741234E340500D0417B /* SceneDelegate.swift in Sources */,
+				F6D56743234E340500D0417B /* LoginView.swift in Sources */,
+				F6D56757234F1C3100D0417B /* Post.swift in Sources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXSourcesBuildPhase section */
+
+/* Begin PBXVariantGroup section */
+		F6D56749234E340700D0417B /* LaunchScreen.storyboard */ = {
+			isa = PBXVariantGroup;
+			children = (
+				F6D5674A234E340700D0417B /* Base */,
+			);
+			name = LaunchScreen.storyboard;
+			sourceTree = "<group>";
+		};
+/* End PBXVariantGroup section */
+
+/* Begin XCBuildConfiguration section */
+		F6D5674D234E340700D0417B /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_ENABLE_OBJC_WEAK = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = dwarf;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				ENABLE_TESTABILITY = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu11;
+				GCC_DYNAMIC_NO_PIC = NO;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_OPTIMIZATION_LEVEL = 0;
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 13.1;
+				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
+				MTL_FAST_MATH = YES;
+				ONLY_ACTIVE_ARCH = YES;
+				SDKROOT = iphoneos;
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
+				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
+			};
+			name = Debug;
+		};
+		F6D5674E234E340700D0417B /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_ENABLE_OBJC_WEAK = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
+				ENABLE_NS_ASSERTIONS = NO;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu11;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 13.1;
+				MTL_ENABLE_DEBUG_INFO = NO;
+				MTL_FAST_MATH = YES;
+				SDKROOT = iphoneos;
+				SWIFT_COMPILATION_MODE = wholemodule;
+				SWIFT_OPTIMIZATION_LEVEL = "-O";
+				VALIDATE_PRODUCT = YES;
+			};
+			name = Release;
+		};
+		F6D56750234E340700D0417B /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CODE_SIGN_STYLE = Automatic;
+				DEVELOPMENT_ASSET_PATHS = "\"SwiftUITalk/Preview Content\"";
+				DEVELOPMENT_TEAM = 77E79NGPCV;
+				ENABLE_PREVIEWS = YES;
+				INFOPLIST_FILE = SwiftUITalk/Info.plist;
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
+				PRODUCT_BUNDLE_IDENTIFIER = com.quickbirdstudios.SwiftUITalk;
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
+			};
+			name = Debug;
+		};
+		F6D56751234E340700D0417B /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CODE_SIGN_STYLE = Automatic;
+				DEVELOPMENT_ASSET_PATHS = "\"SwiftUITalk/Preview Content\"";
+				DEVELOPMENT_TEAM = 77E79NGPCV;
+				ENABLE_PREVIEWS = YES;
+				INFOPLIST_FILE = SwiftUITalk/Info.plist;
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
+				PRODUCT_BUNDLE_IDENTIFIER = com.quickbirdstudios.SwiftUITalk;
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
+			};
+			name = Release;
+		};
+/* End XCBuildConfiguration section */
+
+/* Begin XCConfigurationList section */
+		F6D56736234E340500D0417B /* Build configuration list for PBXProject "SwiftUITalk" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				F6D5674D234E340700D0417B /* Debug */,
+				F6D5674E234E340700D0417B /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+		F6D5674F234E340700D0417B /* Build configuration list for PBXNativeTarget "SwiftUITalk" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				F6D56750234E340700D0417B /* Debug */,
+				F6D56751234E340700D0417B /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+/* End XCConfigurationList section */
+	};
+	rootObject = F6D56733234E340500D0417B /* Project object */;
+}
diff --git a/SwiftUITalk.xcodeproj/project.xcworkspace/contents.xcworkspacedata b/SwiftUITalk.xcodeproj/project.xcworkspace/contents.xcworkspacedata
new file mode 100644
index 0000000..3b24d67
--- /dev/null
+++ b/SwiftUITalk.xcodeproj/project.xcworkspace/contents.xcworkspacedata
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Workspace
+   version = "1.0">
+   <FileRef
+      location = "self:SwiftUITalk.xcodeproj">
+   </FileRef>
+</Workspace>
diff --git a/SwiftUITalk.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist b/SwiftUITalk.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
new file mode 100644
index 0000000..18d9810
--- /dev/null
+++ b/SwiftUITalk.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>
diff --git a/SwiftUITalk.xcodeproj/project.xcworkspace/xcuserdata/nasir.xcuserdatad/UserInterfaceState.xcuserstate b/SwiftUITalk.xcodeproj/project.xcworkspace/xcuserdata/nasir.xcuserdatad/UserInterfaceState.xcuserstate
new file mode 100644
index 0000000..ff85e4c
Binary files /dev/null and b/SwiftUITalk.xcodeproj/project.xcworkspace/xcuserdata/nasir.xcuserdatad/UserInterfaceState.xcuserstate differ
diff --git a/SwiftUITalk.xcodeproj/project.xcworkspace/xcuserdata/stefankofler.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist b/SwiftUITalk.xcodeproj/project.xcworkspace/xcuserdata/stefankofler.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist
new file mode 100644
index 0000000..244a484
--- /dev/null
+++ b/SwiftUITalk.xcodeproj/project.xcworkspace/xcuserdata/stefankofler.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Bucket
+   uuid = "8B0D2653-73B7-4D0E-AC22-49E70CEEF9DC"
+   type = "0"
+   version = "2.0">
+</Bucket>
diff --git a/SwiftUITalk.xcodeproj/xcuserdata/nasir.xcuserdatad/xcschemes/xcschememanagement.plist b/SwiftUITalk.xcodeproj/xcuserdata/nasir.xcuserdatad/xcschemes/xcschememanagement.plist
new file mode 100644
index 0000000..1f44a1b
--- /dev/null
+++ b/SwiftUITalk.xcodeproj/xcuserdata/nasir.xcuserdatad/xcschemes/xcschememanagement.plist
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>SchemeUserState</key>
+	<dict>
+		<key>SwiftUITalk.xcscheme_^#shared#^_</key>
+		<dict>
+			<key>orderHint</key>
+			<integer>0</integer>
+		</dict>
+	</dict>
+</dict>
+</plist>
diff --git a/SwiftUITalk.xcodeproj/xcuserdata/stefankofler.xcuserdatad/xcschemes/xcschememanagement.plist b/SwiftUITalk.xcodeproj/xcuserdata/stefankofler.xcuserdatad/xcschemes/xcschememanagement.plist
new file mode 100644
index 0000000..1f44a1b
--- /dev/null
+++ b/SwiftUITalk.xcodeproj/xcuserdata/stefankofler.xcuserdatad/xcschemes/xcschememanagement.plist
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>SchemeUserState</key>
+	<dict>
+		<key>SwiftUITalk.xcscheme_^#shared#^_</key>
+		<dict>
+			<key>orderHint</key>
+			<integer>0</integer>
+		</dict>
+	</dict>
+</dict>
+</plist>
diff --git a/SwiftUITalk/AppDelegate.swift b/SwiftUITalk/AppDelegate.swift
new file mode 100644
index 0000000..c33646a
--- /dev/null
+++ b/SwiftUITalk/AppDelegate.swift
@@ -0,0 +1,35 @@
+//
+//  AppDelegate.swift
+//  SwiftUITalk
+//
+//  Created by Stefan Kofler on 09.10.19.
+//  Copyright © 2019 QuickBird Studios GmbH. All rights reserved.
+//
+
+import UIKit
+
+@UIApplicationMain
+class AppDelegate: UIResponder, UIApplicationDelegate {
+
+    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+        // Override point for customization after application launch.
+        return true
+    }
+
+    // MARK: UISceneSession Lifecycle
+
+    func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
+        // Called when a new scene session is being created.
+        // Use this method to select a configuration to create the new scene with.
+        return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
+    }
+
+    func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set<UISceneSession>) {
+        // Called when the user discards a scene session.
+        // If any sessions were discarded while the application was not running, this will be called shortly after application:didFinishLaunchingWithOptions.
+        // Use this method to release any resources that were specific to the discarded scenes, as they will not return.
+    }
+
+
+}
+
diff --git a/SwiftUITalk/Assets.xcassets/10.imageset/10.jpg b/SwiftUITalk/Assets.xcassets/10.imageset/10.jpg
new file mode 100644
index 0000000..b155ee9
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/10.imageset/10.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/10.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/10.imageset/Contents.json
new file mode 100644
index 0000000..27b9400
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/10.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "10.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/170.imageset/170.jpg b/SwiftUITalk/Assets.xcassets/170.imageset/170.jpg
new file mode 100644
index 0000000..1854170
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/170.imageset/170.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/170.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/170.imageset/Contents.json
new file mode 100644
index 0000000..0820f85
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/170.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "170.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/2.imageset/2.jpg b/SwiftUITalk/Assets.xcassets/2.imageset/2.jpg
new file mode 100644
index 0000000..c9eba07
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/2.imageset/2.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/2.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/2.imageset/Contents.json
new file mode 100644
index 0000000..d0a044a
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/2.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "2.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/222.imageset/222.jpg b/SwiftUITalk/Assets.xcassets/222.imageset/222.jpg
new file mode 100644
index 0000000..bbe8d3c
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/222.imageset/222.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/222.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/222.imageset/Contents.json
new file mode 100644
index 0000000..c287bf9
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/222.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "222.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/250.imageset/250.jpg b/SwiftUITalk/Assets.xcassets/250.imageset/250.jpg
new file mode 100644
index 0000000..f4aff32
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/250.imageset/250.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/250.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/250.imageset/Contents.json
new file mode 100644
index 0000000..6c5caa0
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/250.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "250.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/34.imageset/34.jpg b/SwiftUITalk/Assets.xcassets/34.imageset/34.jpg
new file mode 100644
index 0000000..b66b7c5
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/34.imageset/34.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/34.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/34.imageset/Contents.json
new file mode 100644
index 0000000..7788d58
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/34.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "34.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/340.imageset/340.jpg b/SwiftUITalk/Assets.xcassets/340.imageset/340.jpg
new file mode 100644
index 0000000..386ebb9
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/340.imageset/340.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/340.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/340.imageset/Contents.json
new file mode 100644
index 0000000..3ede87f
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/340.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "340.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/370.imageset/370.jpg b/SwiftUITalk/Assets.xcassets/370.imageset/370.jpg
new file mode 100644
index 0000000..9a266e4
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/370.imageset/370.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/370.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/370.imageset/Contents.json
new file mode 100644
index 0000000..448b2ce
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/370.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "370.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/398.imageset/398.jpg b/SwiftUITalk/Assets.xcassets/398.imageset/398.jpg
new file mode 100644
index 0000000..8688198
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/398.imageset/398.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/398.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/398.imageset/Contents.json
new file mode 100644
index 0000000..c6e7f00
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/398.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "398.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/4.imageset/4.jpg b/SwiftUITalk/Assets.xcassets/4.imageset/4.jpg
new file mode 100644
index 0000000..1a3115c
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/4.imageset/4.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/4.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/4.imageset/Contents.json
new file mode 100644
index 0000000..a21b3af
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/4.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "4.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/417.imageset/417.jpg b/SwiftUITalk/Assets.xcassets/417.imageset/417.jpg
new file mode 100644
index 0000000..79e7787
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/417.imageset/417.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/417.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/417.imageset/Contents.json
new file mode 100644
index 0000000..815157e
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/417.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "417.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/456.imageset/456.png b/SwiftUITalk/Assets.xcassets/456.imageset/456.png
new file mode 100644
index 0000000..1fd61d6
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/456.imageset/456.png differ
diff --git a/SwiftUITalk/Assets.xcassets/456.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/456.imageset/Contents.json
new file mode 100644
index 0000000..9a96210
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/456.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "456.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/513.imageset/513.jpg b/SwiftUITalk/Assets.xcassets/513.imageset/513.jpg
new file mode 100644
index 0000000..bd49548
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/513.imageset/513.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/513.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/513.imageset/Contents.json
new file mode 100644
index 0000000..bdf1d4b
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/513.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "513.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/591.imageset/591.jpg b/SwiftUITalk/Assets.xcassets/591.imageset/591.jpg
new file mode 100644
index 0000000..a6569e9
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/591.imageset/591.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/591.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/591.imageset/Contents.json
new file mode 100644
index 0000000..1073bf6
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/591.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "591.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/6.imageset/6.jpg b/SwiftUITalk/Assets.xcassets/6.imageset/6.jpg
new file mode 100644
index 0000000..ebec0f9
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/6.imageset/6.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/6.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/6.imageset/Contents.json
new file mode 100644
index 0000000..3333179
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/6.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "6.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/660.imageset/660.jpg b/SwiftUITalk/Assets.xcassets/660.imageset/660.jpg
new file mode 100644
index 0000000..9793ffc
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/660.imageset/660.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/660.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/660.imageset/Contents.json
new file mode 100644
index 0000000..2a88589
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/660.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "660.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/699.imageset/699.jpg b/SwiftUITalk/Assets.xcassets/699.imageset/699.jpg
new file mode 100644
index 0000000..6912392
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/699.imageset/699.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/699.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/699.imageset/Contents.json
new file mode 100644
index 0000000..413158f
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/699.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "699.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/7.imageset/7.jpg b/SwiftUITalk/Assets.xcassets/7.imageset/7.jpg
new file mode 100644
index 0000000..705b8e5
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/7.imageset/7.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/7.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/7.imageset/Contents.json
new file mode 100644
index 0000000..65c1e65
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/7.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "7.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/725.imageset/725.jpg b/SwiftUITalk/Assets.xcassets/725.imageset/725.jpg
new file mode 100644
index 0000000..94a5b3d
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/725.imageset/725.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/725.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/725.imageset/Contents.json
new file mode 100644
index 0000000..600976e
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/725.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "725.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/757.imageset/757.jpg b/SwiftUITalk/Assets.xcassets/757.imageset/757.jpg
new file mode 100644
index 0000000..11ed5d7
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/757.imageset/757.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/757.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/757.imageset/Contents.json
new file mode 100644
index 0000000..2401ca8
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/757.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "757.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/8.imageset/8.jpg b/SwiftUITalk/Assets.xcassets/8.imageset/8.jpg
new file mode 100644
index 0000000..d6ddc9d
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/8.imageset/8.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/8.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/8.imageset/Contents.json
new file mode 100644
index 0000000..d8cd967
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/8.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "8.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/831.imageset/831.jpg b/SwiftUITalk/Assets.xcassets/831.imageset/831.jpg
new file mode 100644
index 0000000..e53f407
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/831.imageset/831.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/831.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/831.imageset/Contents.json
new file mode 100644
index 0000000..1202326
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/831.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "831.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/864.imageset/864.jpg b/SwiftUITalk/Assets.xcassets/864.imageset/864.jpg
new file mode 100644
index 0000000..acbd9fe
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/864.imageset/864.jpg differ
diff --git a/SwiftUITalk/Assets.xcassets/864.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/864.imageset/Contents.json
new file mode 100644
index 0000000..b166b3a
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/864.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "864.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/AppIcon.appiconset/Contents.json b/SwiftUITalk/Assets.xcassets/AppIcon.appiconset/Contents.json
new file mode 100644
index 0000000..d8db8d6
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/AppIcon.appiconset/Contents.json
@@ -0,0 +1,98 @@
+{
+  "images" : [
+    {
+      "idiom" : "iphone",
+      "size" : "20x20",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "20x20",
+      "scale" : "3x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "29x29",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "29x29",
+      "scale" : "3x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "40x40",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "40x40",
+      "scale" : "3x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "60x60",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "60x60",
+      "scale" : "3x"
+    },
+    {
+      "idiom" : "ipad",
+      "size" : "20x20",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "ipad",
+      "size" : "20x20",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "ipad",
+      "size" : "29x29",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "ipad",
+      "size" : "29x29",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "ipad",
+      "size" : "40x40",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "ipad",
+      "size" : "40x40",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "ipad",
+      "size" : "76x76",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "ipad",
+      "size" : "76x76",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "ipad",
+      "size" : "83.5x83.5",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "ios-marketing",
+      "size" : "1024x1024",
+      "scale" : "1x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/Contents.json b/SwiftUITalk/Assets.xcassets/Contents.json
new file mode 100644
index 0000000..da4a164
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/Contents.json
@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/qb_logo.imageset/Contents.json b/SwiftUITalk/Assets.xcassets/qb_logo.imageset/Contents.json
new file mode 100644
index 0000000..1b25793
--- /dev/null
+++ b/SwiftUITalk/Assets.xcassets/qb_logo.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "qb_logo.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/Assets.xcassets/qb_logo.imageset/qb_logo.png b/SwiftUITalk/Assets.xcassets/qb_logo.imageset/qb_logo.png
new file mode 100644
index 0000000..2407df1
Binary files /dev/null and b/SwiftUITalk/Assets.xcassets/qb_logo.imageset/qb_logo.png differ
diff --git a/SwiftUITalk/Base.lproj/LaunchScreen.storyboard b/SwiftUITalk/Base.lproj/LaunchScreen.storyboard
new file mode 100644
index 0000000..865e932
--- /dev/null
+++ b/SwiftUITalk/Base.lproj/LaunchScreen.storyboard
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="13122.16" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13104.12"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <color key="backgroundColor" xcode11CocoaTouchSystemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                        <viewLayoutGuide key="safeArea" id="6Tk-OE-BBY"/>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="53" y="375"/>
+        </scene>
+    </scenes>
+</document>
diff --git a/SwiftUITalk/Extensions/Post+Decodable.swift b/SwiftUITalk/Extensions/Post+Decodable.swift
new file mode 100644
index 0000000..0c68407
--- /dev/null
+++ b/SwiftUITalk/Extensions/Post+Decodable.swift
@@ -0,0 +1,53 @@
+//
+//  Post+Decodable.swift
+//  SwiftUITalk
+//
+//  Created by Stefan Kofler on 10.10.19.
+//  Copyright © 2019 QuickBird Studios GmbH. All rights reserved.
+//
+
+import Foundation
+
+extension Post: Decodable {
+
+    enum CodingKeys: String, CodingKey {
+        case id
+        case date
+        case modified
+        case link
+        case title
+        case content
+        case excerpt
+        case embedded = "_embedded"
+    }
+
+    init(from decoder: Decoder) throws {
+        let values = try decoder.container(keyedBy: CodingKeys.self)
+
+        id = try values.decode(Int.self, forKey: .id)
+        date = try values.decode(Date.self, forKey: .date)
+        modified = try values.decode(Date.self, forKey: .modified)
+        link = try values.decode(String.self, forKey: .link)
+
+        let title = try values.nestedContainer(keyedBy: RenderedKeys.self, forKey: .title)
+        self.title = try title.decode(String.self, forKey: .rendered)
+
+        let content = try values.nestedContainer(keyedBy: RenderedKeys.self, forKey: .content)
+        self.content = try content.decode(String.self, forKey: .rendered)
+
+        let excerpt = try values.nestedContainer(keyedBy: RenderedKeys.self, forKey: .excerpt)
+        self.excerpt = try excerpt.decode(String.self, forKey: .rendered)
+
+        let embedded = try values.nestedContainer(keyedBy: EmbeddedKeys.self, forKey: .embedded)
+        self.author = try embedded.decode([Author].self, forKey: .author)[0]
+    }
+
+    enum RenderedKeys: String, CodingKey {
+        case rendered
+    }
+
+    enum EmbeddedKeys: String, CodingKey {
+        case author
+    }
+
+}
diff --git a/SwiftUITalk/Info.plist b/SwiftUITalk/Info.plist
new file mode 100644
index 0000000..9742bf0
--- /dev/null
+++ b/SwiftUITalk/Info.plist
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>$(DEVELOPMENT_LANGUAGE)</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>UIApplicationSceneManifest</key>
+	<dict>
+		<key>UIApplicationSupportsMultipleScenes</key>
+		<false/>
+		<key>UISceneConfigurations</key>
+		<dict>
+			<key>UIWindowSceneSessionRoleApplication</key>
+			<array>
+				<dict>
+					<key>UISceneConfigurationName</key>
+					<string>Default Configuration</string>
+					<key>UISceneDelegateClassName</key>
+					<string>$(PRODUCT_MODULE_NAME).SceneDelegate</string>
+				</dict>
+			</array>
+		</dict>
+	</dict>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+</dict>
+</plist>
diff --git a/SwiftUITalk/Models/Author.swift b/SwiftUITalk/Models/Author.swift
new file mode 100644
index 0000000..c8bc940
--- /dev/null
+++ b/SwiftUITalk/Models/Author.swift
@@ -0,0 +1,33 @@
+//
+//  Author.swift
+//  SwiftUITalk
+//
+//  Created by Stefan Kofler on 10.10.19.
+//  Copyright © 2019 QuickBird Studios GmbH. All rights reserved.
+//
+
+import Foundation
+import UIKit
+
+struct Author {
+    let id: Int
+    let name: String
+    let description: String
+}
+
+extension Author: Decodable {}
+extension Author: Hashable {}
+
+extension Author {
+
+    var image: UIImage {
+        UIImage(named: "\(id)")!
+    }
+
+    var longDescription: String {
+        """
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+        """
+    }
+
+}
diff --git a/SwiftUITalk/Models/Post.swift b/SwiftUITalk/Models/Post.swift
new file mode 100644
index 0000000..519ab4e
--- /dev/null
+++ b/SwiftUITalk/Models/Post.swift
@@ -0,0 +1,44 @@
+//
+//  Post.swift
+//  SwiftUITest
+//
+//  Created by Stefan Kofler on 24.09.19.
+//  Copyright © 2019 QuickBird Studios GmbH. All rights reserved.
+//
+
+import Foundation
+import UIKit
+
+struct Post {
+    let id: Int
+    let date: Date
+    let modified: Date
+    let link: String
+    let title: String
+    let content: String
+    let excerpt: String
+    let author: Author
+}
+
+extension Post: Identifiable {}
+
+extension Post {
+
+    var formattedDate: String {
+        let dateFormatter = DateFormatter()
+        dateFormatter.dateStyle = .medium
+        return dateFormatter.string(from: date)
+    }
+
+    var header: UIImage {
+        UIImage(named: "\(id)")!
+    }
+
+    var prettyHTML: String {
+        let htmlURL = Bundle.main.url(forResource: "index", withExtension: "html")!
+        let htmlTemplateCode = try! String(contentsOf: htmlURL)
+        return htmlTemplateCode.replacingOccurrences(of: "$PLACEHOLDER$", with: content)
+    }
+
+}
+
diff --git a/SwiftUITalk/Posts.json b/SwiftUITalk/Posts.json
new file mode 100644
index 0000000..25bfff4
--- /dev/null
+++ b/SwiftUITalk/Posts.json
@@ -0,0 +1 @@
+[{"id":864,"date":"2019-09-09T00:20:24","date_gmt":"2019-09-09T00:20:24","guid":{"rendered":"https:\/\/quickbirdstudios.com\/blog\/?p=864"},"modified":"2019-09-25T09:48:29","modified_gmt":"2019-09-25T09:48:29","slug":"gradle-kotlin-buildsrc-plugin-android","status":"publish","type":"post","link":"https:\/\/quickbirdstudios.com\/blog\/gradle-kotlin-buildsrc-plugin-android\/","title":{"rendered":"I hated Gradle! Kotlin and the buildSrc Plugin made me love it"},"content":{"rendered":"<p>Let\u2019s talk about the elephant in the room\u2026 Gradle\u2026<\/p>\n<p><img class=\"aligncenter wp-image-867 size-full\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle_Logo.png\" alt=\"\" width=\"535\" height=\"186\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle_Logo.png 535w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle_Logo-300x104.png 300w\" sizes=\"(max-width: 535px) 100vw, 535px\" \/><\/p>\n<p>To be honest, I <strong>hated<\/strong> Gradle. It was always one of the biggest pain points in my carrier as a developer. Whenever I ran into a \u201eGradle issue\u201c during Android development, I immediately knew: This is going to be a bad day. All I could then do is copy and paste small little snippets from Stackoverflow, not understanding a single bit what they do and hoping they would work.<\/p>\n<p><img class=\"aligncenter wp-image-898 size-full\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-rocket-1.jpg\" alt=\"\" width=\"980\" height=\"482\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-rocket-1.jpg 980w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-rocket-1-300x148.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-rocket-1-768x378.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-rocket-1-550x271.jpg 550w\" sizes=\"(max-width: 980px) 100vw, 980px\" \/><\/p>\n<p>I did this until some small snippet \u201esolved\u201c the problem, unknowingly that this will cause some other issue later. It was the circle of \u201eGradle issues\u201c and I felt that everyone in the team handled it pretty similar. Talking to other developers at meetups revealed: This was not just us. Almost everyone was doing it exactly like this.<\/p>\n<p>Except, some Gradle wizards. They knew the answers\u2026 The knew how to tame the beast and I was absolutely thrilled by their skills! In this article, I would like to share our team&#8217;s path to \u201eGradle Mastery\u201c and how easily you can become the guy taming the beast.<\/p>\n<h3>The true source of all evil<\/h3>\n<p>But before we start fixing our problems with Gradle, let\u2019s try to identify what the \u201etrue source of all evil\u201c is. Especially in the Android community, we often see Gradle being blamed for almost everything: Builds are slow: \u201eOh f_ck Gradle!\u201c. Publishing a library is confusing: \u201eOh f_ck Gradle!\u201c. There are issues with Databinding: \u201eOh f_ck Gradle!\u201c. Let\u2019s clarify one thing:<\/p>\n<p>Android-Gradle-Plugin != Gradle. People used to talk about those two interchangeably, especially at times were the version names of both were pretty similar. Many problems we saw in the last years were not particularly Gradle issues. Blaming build times of Android Projects solely onto Gradle seems not fair to me and plays a huge role in the ongoing witch-hunt against Gradle. So that this is out of our way, what is now causing our pain?<\/p>\n<p>Groovy. It\u2019s Groovy.<\/p>\n<p><img class=\"aligncenter wp-image-885\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Mein-Beitrag-1.jpg\" alt=\"\" width=\"1000\" height=\"500\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Mein-Beitrag-1.jpg 2560w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Mein-Beitrag-1-300x150.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Mein-Beitrag-1-768x384.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Mein-Beitrag-1-1024x512.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Mein-Beitrag-1-550x275.jpg 550w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>Please don\u2019t get me wrong: I am not trying to judge Groovy as a language. I never used Groovy for \u201ea real project\u201c, but using it as a Java\/Kotlin developer without any hints of the IDE is absolutely terrifying. To be honest: As I started Android development, I thought that <code class=\"code-inline\">build.gradle<\/code> files just use some kind of \u201emagical markup language\u201c which I was unable to make sense of.<\/p>\n<h3>The lord and savior: Kotlin &amp; the buildSrc module?<\/h3>\n<p>But then <a href=\"https:\/\/blog.jetbrains.com\/kotlin\/2019\/01\/kotlin-1-3-20-released\/\">Kotlin announced that their new Multiplatform Plugin is now supporting the also pretty new Kotlin Gradle DSL<\/a> and the team wanted to evaluate this technology for our use cases. You can find our results in this <a href=\"https:\/\/quickbirdstudios.com\/blog\/is-kotlin-native-production-ready\/\">blog post<\/a>. After we forced ourselves to write build files using Kotlin, it suddenly made the click. Suddenly we can just write code, as we are used to, read documentation as we are used to, click into the implementation of functions that we are using, as we are used to. This is a game-changer for us! Suddenly the Gradle ecosystem laid itself out right in front of us and we liked it a lot.<\/p>\n<p>We started to investigate how we could improve our build scripts even more and found something very promising: The \u201ebuildSrc\u201c folder.<\/p>\n<p><img class=\"aligncenter wp-image-872\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Mein-Beitrag.jpg\" alt=\"\" width=\"1000\" height=\"333\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Mein-Beitrag.jpg 2559w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Mein-Beitrag-300x100.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Mein-Beitrag-768x256.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Mein-Beitrag-1024x341.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Mein-Beitrag-550x183.jpg 550w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>It\u2019s basically a plain old Gradle module\u2026 with one twist to it! It will be the very first thing that is built and all the code you write in there will be available later in your <code class=\"code-inline\">build.gradle.kts<\/code> files! This starts to blur the line between what we considered to be \u201ecoding\u201c and \u201ewriting build files\u201c and it\u2019s even much better than the already cool <code class=\"code-inline\">build.gradle.kts<\/code> because of a better, more fluent IDE support as well as all the additionally gained freedom by \u201ejust having a Gradle module\u201c. We can now structure our code arbitrarily, use dependency injection, read properties from files, etc: The sky is the limit!<\/p>\n<p>We also looked at what other people are currently using this awesome buildSrc folder for at the moment and we found several articles about managing dependencies, that we liked a lot!<\/p>\n<ul>\n<li><a href=\"https:\/\/proandroiddev.com\/gradle-dependency-management-with-kotlin-94eed4df9a28\">Gradle dependency management with Kotlin (buildSrc)<\/a> (Mario Sanoguera de Lorenzo)<\/li>\n<li><a href=\"https:\/\/handstandsam.com\/2018\/02\/11\/kotlin-buildsrc-for-better-gradle-dependency-management\/\">Kotlin + buildSrc for Better Gradle Dependency Management<\/a> (Sam Edwards)<\/li>\n<\/ul>\n<p>Those are awesome ideas, but we are convinced that the community needs to go one step further. Build files tend to grow longer and longer over time (some of ours is up to 400 lines of code), while also gaining more and more complexity. Projects using multiple modules might end up with almost pure boilerplate in their build scripts. If one would want to change details in the deployment, one would have to adjust this code in all these files. That\u2019s awful. Maybe we can make build files easier and more maintainable by splitting functionality into smaller units? Maybe we should share some common <code class=\"code-inline\">*.gradle.kts<\/code> files and include them in our actual build files, as many projects already do? But is this really flexible enough? Will this scale well? Will this even make sense for a single module project? Will this lead you (and your team) to the path of true \u201eGradle mastery\u201c?<\/p>\n<p>We think there is a much better and easier approach than sharing <code class=\"code-inline\">*.gradle.kts<\/code> files. Here it is:<\/p>\n<h3>The buildSrc plugin<\/h3>\n<p>We can extend the great idea of managing dependencies inside the buildSrc folder! Why not treating build logic and the corresponding buildSrc module as a \u201efirst-class citizen\u201c inside your project and moving related logic in there? But how should we structure this code? Will this be just another confusing new concept to learn for every team member? No! Let\u2019s use a concept that every one of you is already familiar with: Plugins! Let\u2019s build a project-specific Gradle plugin! This will provide a basic structure to our build logic while being familiar to use inside our build files.<\/p>\n<p>Please, bear with me! This will be much, <b>much<\/b> less complicated than you think. Writing your own Gradle plugin will teach you how to love something, that you always thought would be pure evil.<\/p>\n<p><img class=\"aligncenter size-full wp-image-876\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/giphy.gif\" alt=\"\" width=\"320\" height=\"176\" \/><\/p>\n<p>Let me show you an example of how our build files changed using this approach: At the beginning we started with this, a fucking huge file with almost 200 lines of code:<\/p>\n<p><a href=\"https:\/\/gist.github.com\/LizzieStudeneer\/5f71da33b634afea0b5acfe1ec3708c3\" target=\"_blank\" rel=\"noopener noreferrer\"><img class=\"aligncenter wp-image-892\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/ScreenshotLong.png\" alt=\"\" width=\"1000\" height=\"526\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/ScreenshotLong.png 3804w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/ScreenshotLong-300x158.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/ScreenshotLong-768x404.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/ScreenshotLong-1024x538.png 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/ScreenshotLong-550x289.png 550w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a>(<a href=\"https:\/\/gist.github.com\/LizzieStudeneer\/5f71da33b634afea0b5acfe1ec3708c3\" target=\"_blank\" rel=\"noopener noreferrer\">See full Gist of this<\/a>)<\/p>\n<p>Using the described approach, we refactored this monster into an understandable piece of code with just 34 lines of code:<\/p>\n<p><a href=\"https:\/\/gist.github.com\/LizzieStudeneer\/f569e5a16cf3958c08e3bdcd827eef76\" target=\"_blank\" rel=\"noopener noreferrer\"><img class=\"aligncenter wp-image-893 size-full\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/safter.jpg\" alt=\"\" width=\"958\" height=\"847\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/safter.jpg 958w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/safter-300x265.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/safter-768x679.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/safter-550x486.jpg 550w\" sizes=\"(max-width: 958px) 100vw, 958px\" \/><\/a><\/p>\n<p>(<a href=\"https:\/\/gist.github.com\/LizzieStudeneer\/f569e5a16cf3958c08e3bdcd827eef76\" target=\"_blank\" rel=\"noopener noreferrer\">See full Gist of this<\/a>)<\/p>\n<p><span style=\"font-size: inherit;\">Quite impressive, right? I am still extremely proud seeing this. But what happened here?<br \/>\n<\/span>What is the new build script doing?<\/p>\n<ol start=\"1\">\n<li>It applies our project specific gradle plugin \u201ecom.quickbirdstudios.bluesqaure\u201c<\/li>\n<li>It configures this plugin using the \u201ebluesqaure\u201c extension<\/li>\n<li>It defines its dependencies (since, you this is really module specific)<\/li>\n<\/ol>\n<p>No boilerplate anymore, whatsoever \ud83e\udd73 But please, before you think this is complicated, to do: Hear me out! Let me convince you otherwise and show how you can do something like this within 30 minutes, no matter your current experience with Gradle!<\/p>\n<h3>Step 1: Setting up your project specific Gradle Plugin<\/h3>\n<p>You might already have a buildSrc folder set up for your project, but just in case you don\u2019t have, here is how to do this:<\/p>\n<ul>\n<li>Create a folder inside the root folder of your project called <code class=\"code-inline\">buildSrc<\/code><\/li>\n<li>Create a build script for this folder <code class=\"code-inline\">buildSrc\/build.gradle.kts<\/code> like&#8230;<\/li>\n<\/ul>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/d1370e77aa331632ceb3246dcc1bd4ee.js\"><\/script><br \/>\nNow let\u2019s implement your plugin: <code class=\"code-inline\">BluesquarePlugin<\/code> in our exemplary case!<\/p>\n<p>You can find further, additional information about <a href=\"https:\/\/docs.gradle.org\/current\/userguide\/custom_plugins.html\">\u201ehow to build a Gradle Plugin\u201c here<\/a>. But it is actually pretty straight-forward!<\/p>\n<p>We need a class (let\u2019s call it <code class=\"code-inline\">BluesqurePlugin<\/code> in this example) that extends <code class=\"code-inline\">Plugin&lt;Project&gt;<\/code>:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/0ca0a8fec301358db1b24d5ce6cc0389.js\"><\/script><br \/>\nThe apply function will be called, you guessed it, the moment that this plugin will be applied to your project! But how can we apply this plugin to our real build scripts? Which id will be used? Ok. I have to admit, this is the only part that you might not like, but it\u2019s still pretty simple.<\/p>\n<p>In order to define the id of your plugin (the string used later to apply it, eg. <code class=\"code-inline\">com.quickbirdstudios.bluesquare<\/code>), we need to create a properties file inside our META-INF \ud83d\ude12 So here is how you would set this id:<\/p>\n<p>Create a file like<\/p>\n<p><code class=\"code-inline\">buildSrc\/src\/main\/resources\/META-INF\/gradle-plugins\/com.quickbirdstudios.bluesquare.properties<\/code><\/p>\n<p>Which contains the fully qualified name of your plugin&#8217;s class<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/6be4282ab537fb5cee018104002e0952.js\"><\/script><br \/>\nThis is it, I promise!<br \/>\nNow we can start to apply this plugin to all of our modules:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/3bf7b9b308a65e7c8dda9679843e1aeb.js\"><\/script><br \/>\nWhich will call the <code class=\"code-inline\">apply<\/code> function inside of our Plugin!<\/p>\n<h3>Step 2: Move your common code into your Plugin<\/h3>\n<p>Let\u2019s do this using exemplary Android configuration. When configuring our Android build, we will use the DSL directly in our build script.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/5d8a08d36e9ee48b201a8b1cb926df8f.js\"><\/script><br \/>\nAs explained previously,this <code class=\"code-inline\">android {}<\/code> block is called \u201e<a href=\"https:\/\/docs.gradle.org\/current\/userguide\/custom_plugins.html#sec:getting_input_from_the_build\">Extension<\/a>\u201c . The receiver of this function implements <code class=\"code-inline\">AndroidBaseExtensions<\/code>. Instead of doing this inside each <code class=\"code-inline\">build.gradle.kts<\/code> file, we could move this into one function that we call when our project plugin gets applied:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/f61e2867a9f5b962df473c622429c675.js\"><\/script><br \/>\nAfter that, creating a new Android module in our project is fairly simple. In our case, we would just apply the <code class=\"code-inline\">com.quickbirdstudios.bluesquare<\/code> plugin to configure our Android build accordingly:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/9844d78a4a09f3b366308107923150b8.js\"><\/script><br \/>\nNote: You can still override properties which are set by our project plugin, by just configuring them again using the <code class=\"code-inline\">android {}<\/code> block!<\/p>\n<h3>Step 3: Apply default dependencies<\/h3>\n<p>In the example above, we can see the following dependencies to be applied:<\/p>\n<ul>\n<li>Kotlin Standard library<\/li>\n<li>JUnit<\/li>\n<li>Support Test Runner<\/li>\n<li>Espresso<\/li>\n<\/ul>\n<p>Since we want to apply these dependencies to all of our modules, we could as well let the plugin do this for us. Let\u2019s add another function <code class=\"code-inline\">configureDependencies()<\/code> to our plugin which will add dependencies accordingly.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/0d03b6cbcd67e2a3d6c3361a4367ab5d.js\"><\/script><br \/>\nSuddenly, Gradle feels more like a framework or library that you can work with instead of this magical build system, that no one really understands! Creating a new Android Module is now as simple as:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/6882d7f7f01fec405a1fdf5c9fb7d7f9.js\"><\/script><\/p>\n<h3>Step 4: Apply default plugins<\/h3>\n<p>Let\u2019s face it: Our current implementation has one flaw: If we would apply our <code class=\"code-inline\">bluesquare<\/code> plugin before the Android plugin, it would not work, since it expects the Android plugin to be loaded already. Also, if all of our modules will be Android modules, why not just let the plugin manage it for us?<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/6f8789cb4d374f1d98481e018aa971c4.js\"><\/script><br \/>\nNow let\u2019s see how easy it is to create a new Android module:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/1a6d4fe64fa7c070f87e1119e3fd0d0b.js\"><\/script><br \/>\nThat\u2019s all. This will automatically apply the Android Library Plugin, configure it and set default dependencies!<\/p>\n<p>But what we want to have pure java modules, that do not load the Android plugin? Here comes the best part of this approach: It\u2019s just coding using a library (Gradle)! You can do whatever you want! You are not even limited in the number of plugins you create! Why not creating a base plugin and creating many sub-classes like <code class=\"code-inline\">BluesquareBasePlugin<\/code>, <code class=\"code-inline\">BluesquareAndroidPlugin<\/code>, <code class=\"code-inline\">BluesquareJavaPlugin<\/code>, <code class=\"code-inline\">BluesquareMultiplatformPlugin<\/code>. You can do whatever you want and it just feels like coding. The Gradle API\u2019s are actually surprisingly nice to work with!<\/p>\n<h3>Make your plugin configurable<\/h3>\n<p>Now here is how you can make this approach ultimately flexible! Of course, you have already noticed that you are able to use some \u201etop-level configuration\u201c functions inside your build script after applying a plugin. For example: After you applied the Android Library or Android Application plugin, you can use the <code class=\"code-inline\">android {}<\/code> block to configure it.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/afb7cffa29edf215b0aff8b74f1fa405.js\"><\/script><br \/>\nThis concept is called \u201e<a href=\"https:\/\/docs.gradle.org\/current\/userguide\/custom_plugins.html#sec:getting_input_from_the_build\">Extension<\/a>\u201c by Gradle and the API&#8217;s providing our custom one is pretty simple!<\/p>\n<p>Let\u2019s demonstrate this by an example. Imagine we want to configure two things<\/p>\n<ol start=\"1\">\n<li>Is this module even published?<\/li>\n<li>What will be the name of the package (when published)?<\/li>\n<\/ol>\n<p>Here is what we would like to write inside our build files:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/bb16dc8d7e9b0deece8a802d6cfdd28a.js\"><\/script><br \/>\nIt\u2019s actually as simple as creating a plain old class containing this information:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/1b004fd852c5dc92b4bf3f7086b55602.js\"><\/script><br \/>\nThe only thing left to do is, that we need to tell Gradle about this configurable class:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/860802697deb7e940540623749d2f8f1.js\"><\/script><br \/>\nYou will then see this <code class=\"code-inline\">bluesquare<\/code> extension being configured during the evaluation of your build script! You are, again, unlimited in what you can do with this mechanism! You can create multiple extensions, to configure separate parts of your builds, you could add listeners to fields of this extensions and act on the <code class=\"code-inline\">Project<\/code> accordingly!<\/p>\n<h2>Conclusion: Anyone can become a Gradle wizard<\/h2>\n<h3><img class=\"aligncenter wp-image-899 size-full\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-school-2.jpg\" alt=\"\" width=\"980\" height=\"491\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-school-2.jpg 980w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-school-2-300x150.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-school-2-768x385.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-school-2-550x276.jpg 550w\" sizes=\"(max-width: 980px) 100vw, 980px\" \/><\/h3>\n<p>We think buildSrc plugin approach is great! Using this we, at QuickBird Studios, can do the following in just 7 lines of code:<\/p>\n<ul>\n<li>Configure our Android builds<\/li>\n<li>Apply default plugins<\/li>\n<li>Apply default dependencies<\/li>\n<li>Run a custom linter<\/li>\n<li>Run aggregated coverage reports<\/li>\n<li>Run aggregated test result reports<\/li>\n<li>Install default git hooks into the project<\/li>\n<li>Setup Multiplatform builds<\/li>\n<li>Setup publications for our library modules<\/li>\n<li>Deploy libraries to the correct repository (Snapshot\/Release)<\/li>\n<\/ul>\n<p>Call me Donald Trump, but using a buildSrc plugin approach is the best way to organize your builds! It\u2019s superior to creating shared <code class=\"code-inline\">*.gradle.kts<\/code> files that will be loaded by other build files because of the better IDE support, flexibility and configurability and the overall freedom that this approach gives the developer.<\/p>\n<p>We treat the <code class=\"code-inline\">buildSrc<\/code> module as a first-class citizen in our project. Anyone could become a Gradle wizard and tame the beast, using this technique. You should finally tame it too.<\/p>\n<p><strong>IMPORTANT:<\/strong> If you wanna learn more on mastering Gradle and are around Munich, join us next month for this free Gradle Mastery workshop (only 10 seats still available! Be quick): <a href=\"https:\/\/www.eventbrite.com\/e\/mobile-hack-night-swiftui-mastering-gradle-registration-71384830951\">https:\/\/www.eventbrite.com\/e\/mobile-hack-night-swiftui-mastering-gradle-registration-71384830951<\/a><\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-rocket-1.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/gradle-kotlin-buildsrc-plugin-android\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-rocket-1.jpg\" data-pin-description=\"I hated Gradle! Kotlin and the buildSrc Plugin made me love it\"\/>","protected":false},"excerpt":{"rendered":"<p>Let\u2019s talk about the elephant in the room\u2026 Gradle\u2026 To be honest, I hated Gradle. It was always one of the biggest pain points in my carrier as a developer. Whenever I ran into a \u201eGradle issue\u201c during Android development, I immediately knew: This is going to be a bad day. All I could then [&hellip;]<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-rocket-1.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/gradle-kotlin-buildsrc-plugin-android\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-rocket-1.jpg\" data-pin-description=\"I hated Gradle! Kotlin and the buildSrc Plugin made me love it\"\/>","protected":false},"author":7,"featured_media":898,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/864"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=864"}],"version-history":[{"count":61,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/864\/revisions"}],"predecessor-version":[{"id":970,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/864\/revisions\/970"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/898"}],"wp:attachment":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]},"_embedded":{"author":[{"id":7,"name":"Sebastian Sellmair","url":"","description":"","link":"https:\/\/quickbirdstudios.com\/blog\/author\/sellmair\/","slug":"sellmair","avatar_urls":{"24":"https:\/\/secure.gravatar.com\/avatar\/da409b5f2e5bfc09de7b34ed68df2c89?s=24&d=mm&r=g","48":"https:\/\/secure.gravatar.com\/avatar\/da409b5f2e5bfc09de7b34ed68df2c89?s=48&d=mm&r=g","96":"https:\/\/secure.gravatar.com\/avatar\/da409b5f2e5bfc09de7b34ed68df2c89?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users"}]}}],"wp:featuredmedia":[{"id":898,"date":"2019-09-06T14:44:44","slug":"gradle-rocket-2","type":"attachment","link":"https:\/\/quickbirdstudios.com\/blog\/gradle-kotlin-buildsrc-plugin-android\/gradle-rocket-2\/","title":{"rendered":"Gradle rocket"},"author":2,"caption":{"rendered":"<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-rocket-1.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/gradle-kotlin-buildsrc-plugin-android\/gradle-rocket-2\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-rocket-1.jpg\" data-pin-description=\"Gradle rocket\"\/>"},"alt_text":"","media_type":"image","mime_type":"image\/jpeg","media_details":{"width":980,"height":482,"file":"2019\/09\/Gradle-rocket-1.jpg","sizes":{"thumbnail":{"file":"Gradle-rocket-1-150x150.jpg","width":150,"height":150,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-rocket-1-150x150.jpg"},"medium":{"file":"Gradle-rocket-1-300x148.jpg","width":300,"height":148,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-rocket-1-300x148.jpg"},"medium_large":{"file":"Gradle-rocket-1-768x378.jpg","width":768,"height":378,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-rocket-1-768x378.jpg"},"spatial-index":{"file":"Gradle-rocket-1-840x482.jpg","width":840,"height":482,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-rocket-1-840x482.jpg"},"spatial-masonry":{"file":"Gradle-rocket-1-550x271.jpg","width":550,"height":271,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-rocket-1-550x271.jpg"},"full":{"file":"Gradle-rocket-1.jpg","width":980,"height":482,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-rocket-1.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/09\/Gradle-rocket-1.jpg","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/898"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/attachment"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=898"}]}}],"wp:term":[[{"id":1,"link":"https:\/\/quickbirdstudios.com\/blog\/category\/uncategorized\/","name":"Uncategorized","slug":"uncategorized","taxonomy":"category","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories\/1"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/taxonomies\/category"}],"wp:post_type":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts?categories=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}],[]]}},{"id":831,"date":"2019-08-05T07:06:33","date_gmt":"2019-08-05T07:06:33","guid":{"rendered":"https:\/\/quickbirdstudios.com\/blog\/?p=831"},"modified":"2019-09-20T12:55:02","modified_gmt":"2019-09-20T12:55:02","slug":"combine-vs-rxswift","status":"publish","type":"post","link":"https:\/\/quickbirdstudios.com\/blog\/combine-vs-rxswift\/","title":{"rendered":"Combine vs. RxSwift: Should you switch to Combine?"},"content":{"rendered":"<p>Roughly one month ago Apple showcased SwiftUI at the WWDC 2019. Since we humans can only focus on one new thing, all the hype was reserved for <a href=\"https:\/\/quickbirdstudios.com\/blog\/swiftui-vs-android-jetpack-compose\/\">SwiftUI<\/a> and people almost missed Apple&#8217;s second big announcement: <a href=\"https:\/\/developer.apple.com\/documentation\/combine\">Combine<\/a>. A lot of folks were seeing Combine only as an enabler for SwiftUI, but Combine also introduces first-class reactive programming to the Apple platforms without the need for external dependencies like <a href=\"https:\/\/github.com\/ReactiveX\/RxSwift\">RxSwift<\/a> or <a href=\"https:\/\/github.com\/ReactiveCocoa\/ReactiveSwift\">ReactiveSwift<\/a>. In this article, we will take a deeper look at Combine and compare it to RxSwift, the current state of the art reactive framework for iOS programming. <img class=\"alignnone size-full wp-image-832\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-Election-1.jpg\" alt=\"\" width=\"980\" height=\"388\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-Election-1.jpg 980w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-Election-1-300x119.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-Election-1-768x304.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-Election-1-550x218.jpg 550w\" sizes=\"(max-width: 980px) 100vw, 980px\" \/><\/p>\n<h3>What is Combine?<\/h3>\n<p>Before we start with the comparison, let&#8217;s take a look at how Apple answers the question of what Combine really is:<\/p>\n<blockquote><p>The Combine framework provides a declarative Swift API for processing values over time.<\/p><\/blockquote>\n<p>Hmm, that sounds familiar. Is that not the same as <a href=\"https:\/\/quickbirdstudios.com\/blog\/what-is-functional-reactive-programming-frp\/\">reactive programming<\/a>? It&#8217;s funny to see Apple trying to avoid the word &#8216;reactive programming&#8217;. There is not a single mention of it in its documentation and neither was in their WWDC presentations. It seems like Apple doesn&#8217;t want to give any credits to the fantastic community that build around reactive programming. Combine itself even implements the reactive streams specification with some small adaptions. Ok, so now that we know that Combine is &#8220;just another&#8221; reactive framework, we are ready to move on and see what makes it a better or worse fit for our needs.<\/p>\n<h3>Why should we use Combine?<\/h3>\n<blockquote><p>By adopting Combine, you\u2019ll make your code easier to read and maintain, by centralizing your event-processing code and eliminating troublesome techniques like nested closures and convention-based callbacks.<\/p><\/blockquote>\n<p>We should use Combine for the same reasons as people use reactive programming already. It allows developers to easily express (asynchronous) data flows, automatically evaluates them and propagates data changes. Your complicated event-processing code becomes easier to read and maintain. Apples announcement will be a huge push for reactive programming in general. It will bring modern coding techniques from other platforms (like the web) to the Apple platforms. If you follow our blog, you will know that we at QuickBird Studios are <a href=\"https:\/\/quickbirdstudios.com\/blog\/what-is-functional-reactive-programming-frp\/\">big fans of functional reactive programming<\/a> and therefore use RxSwift on iOS, next to RxJava on Android or Flow on Kotlin. Are we going to migrate all our RxSwift code to Combine? Not really, there are a lot of pros and cons for both RxSwift and Combine. We&#8217;ll compare RxSwift and Combine thoroughly in this article.<\/p>\n<h3>Naming scheme<\/h3>\n<p>First of all, Combine follows mostly the same principles as RxSwift but uses a different naming scheme. Most operators just have a different name but actually have an equivalent in RxSwift. If you come from RxSwift and have trouble finding the corresponding Combine operation or component you can use this <a href=\"https:\/\/medium.com\/gett-engineering\/rxswift-to-apples-combine-cheat-sheet-e9ce32b14c5b\">great cheat-sheet created by Shai Mishali<\/a>. These are the two most important naming changes: Observable -&gt; Publisher Observer -&gt; Subscriber<\/p>\n<h3>Error types and error handling<\/h3>\n<p>As mentioned above, RxSwift&#8217;s `Observable` is the counterpart to Combine&#8217;s `Publisher`. They fulfill the same purpose. If we look at their protocol specification tough, we see one big difference: an additional `Error` Type. In Combine, every `Publisher` needs to define its error type. The same applies to ReactiveSwift as well. On the other hand, RxSwift&#8217;s `Observable` does not use an error type. It might throw any kind of error any time. RxSwift&#8217;s `Observable` is probably easier to use because you don&#8217;t need to think about what kind of errors can be thrown. However, this means you have to make sure to handle errors on your own. Your compiler won&#8217;t help you if you forget about it. Small hint: If your stream doesn&#8217;t throw any errors at all you can use the `Never` type. You can see the explicit error type of Combine as an additional layer of type safety which also adds some code overhead. You can achieve similar behavior by using a `Result` type in RxSwift (this adds an additional error type, but your stream won&#8217;t stop after throwing an error) or a having explicit streams for your errors. Exception throwing and handling are also a little different in Combine. Combine separates throwing and non-throwing calls strictly. For example, there is a separate tryMap function which is a map that can explicitly throw errors. Since you cannot define which errors can be thrown in Swift, the resulting Publisher just uses the general `Swift.Error` type for errors \ud83d\ude14<\/p>\n<h3>Performance<\/h3>\n<p>RxSwift is a pretty optimized piece of software and I rarely heard any complaints about performance when using it (correctly). But Combine sets new standards. It&#8217;s a performance beast! From the beginning, Combine was designed with performance in mind. It delivers huge performance benefits compared to RxSwift. Tests showed an average 40% more data passthrough using Combine. We <a href=\"https:\/\/github.com\/grafele\/CombineRxBenchmarks\">ported the RxSwift performance test-suite to Combine<\/a> and created detailed reports about performance differences. The test code and more details are available here. As a summary, Combine was faster in almost every test. These statistics show&nbsp;every test-method and its result. Lower is better.<\/p>\n<p><img class=\"alignnone size-full wp-image-855\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/all_release.png\" alt=\"\" width=\"3469\" height=\"1570\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/all_release.png 3469w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/all_release-300x136.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/all_release-768x348.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/all_release-1024x463.png 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/all_release-550x249.png 550w\" sizes=\"(max-width: 3469px) 100vw, 3469px\" \/><\/p>\n<p>One of the reasons for this huge performance difference is the actual implementation of both frameworks. RxSwift uses Swift as their main programming language and needs to open a lot of sinks under the hood. That costs a lot of performance. Combine on the other side is a closed source project that is not necessarily written in Swift but just exposes a Swift interface. Apple can use a lot of performance optimizations that aren&#8217;t available to other programmers out there.<\/p>\n<h3>Backward compatibility<\/h3>\n<p>One huge downside of Combine is its non-existing backward compatibility. Combine needs iOS 13 \/ macOS Catalina and its new runtime to work. There is no backward compatibility to earlier versions of their operating systems planned. On the contrary RxSwift runs on iOS 8 upwards and therefore probably on more iOS versions than most apps out there. This will be a huge selling point for the next 1-3 years (for some companies even longer) until they can safely exclude customers with older iOS versions.<\/p>\n<h3>Back-pressure<\/h3>\n<p>Back-pressure? Never heard of it? <a href=\"https:\/\/github.com\/ReactiveX\/RxJava\/wiki\/Backpressure\">Back-pressure<\/a> allows components that are not able to consume items fast enough to communicate their situation to their upstream components. This allows them to handle this situation and reduce the load for the consuming components. This prevents components under stress to drop messages in an uncontrolled fashion or to fail catastrophically. <img class=\"alignnone size-full wp-image-835\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-battle.jpg\" alt=\"\" width=\"800\" height=\"521\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-battle.jpg 800w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-battle-300x195.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-battle-768x500.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-battle-550x358.jpg 550w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/> RxJava offers the `Flowable` type for exactly that purpose. RxSwift doesn&#8217;t have this type or any alternative and therefore doesn&#8217;t support back-pressure at all. Combine on the other side supports back-pressure out of the box.<\/p>\n<h3>Available components and operators<\/h3>\n<p>Combine can&#8217;t offer you the same amount of components and operators (see cheat-sheet mentioned before) as RxSwift does. Already the <a href=\"https:\/\/github.com\/ReactiveX\/RxSwift\/blob\/master\/Documentation\/Traits.md\">list of available traits<\/a> is much shorter in Combine. But is this necessarily bad? I don&#8217;t think so. Combine tries to focus on the core components of reactive programming and excludes operators and components you don&#8217;t need that often. This makes it easier to understand the framework and gets rid of a lot of unnecessary complexity. And I&#8217;m pretty sure someone will implement the missing components and operators in an extension framework in the foreseeable future \ud83d\ude09<\/p>\n<h3>UI framework<\/h3>\n<p>To use reactive programming in your app development workflow you need some way to bind your reactive streams to your UI and vice versa. RxCocoa is the go-to solution for RxSwift. It allows you to bind reactive streams to your views and get streams from them (e.g. for button taps, text changes, etc.). Combine doesn&#8217;t have such a first-party framework to connect it to Cocoa\/CocoaTouch. Such an <a href=\"https:\/\/github.com\/freak4pc\/CombineCocoa\">adapter framework<\/a> is currently under development by the amazing <a href=\"https:\/\/github.com\/freak4pc\">freak4pc<\/a>. Otherwise you can use the <code>assign<\/code> method of Combine to bind a stream to a key path and therefore connect it to the properties of a view, but there is no way to get any stream from UI components. <script src=\"https:\/\/gist.github.com\/grafele\/2687e113feb5c592dd304d70b609db46.js\"><\/script> Besides that, <a href=\"https:\/\/quickbirdstudios.com\/blog\/swiftui-vs-android-jetpack-compose\/\">SwiftUI<\/a> is strongly connected to Combine and interacts pretty well with it. But SwiftUI it is a completely new UI framework and won&#8217;t be the go-to solution in the upcoming months. Since both of them rely on iOS 13 they will be introduced to most code bases together. It will take a few years until they both get introduced into code bases.<\/p>\n<h3>Conclusion<\/h3>\n<p>As you can see there aren&#8217;t that many huge differences between RxSwift and Combine. Both frameworks allow you to use reactive programming on the Apple platforms. The funny thing: the fact that Apple published combine might actually boost the popularity of RxSwift much more in the next years. RxSwift does not need to be afraid since Combine still lacks backward compatibility. This joy might only be temporary though. Users will eventually adopt to new iOS versions. Since Combine and RxSwift are so similar, at one point, more and more people might jump on Combine. In the mean time: keep using RxSwift and enjoy the happy life of reactive programming \ud83e\udd13<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-Election-1.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/combine-vs-rxswift\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-Election-1.jpg\" data-pin-description=\"Combine vs. RxSwift: Should you switch to Combine?\"\/>","protected":false},"excerpt":{"rendered":"<p>Roughly one month ago Apple showcased SwiftUI at the WWDC 2019. Since we humans can only focus on one new thing, all the hype was reserved for SwiftUI and people almost missed Apple&#8217;s second big announcement: Combine. A lot of folks were seeing Combine only as an enabler for SwiftUI, but Combine also introduces first-class [&hellip;]<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-Election-1.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/combine-vs-rxswift\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-Election-1.jpg\" data-pin-description=\"Combine vs. RxSwift: Should you switch to Combine?\"\/>","protected":false},"author":4,"featured_media":832,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/831"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=831"}],"version-history":[{"count":17,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/831\/revisions"}],"predecessor-version":[{"id":967,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/831\/revisions\/967"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/832"}],"wp:attachment":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=831"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=831"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]},"_embedded":{"author":[{"id":4,"name":"Stefan Kofler","url":"","description":"","link":"https:\/\/quickbirdstudios.com\/blog\/author\/stefan\/","slug":"stefan","avatar_urls":{"24":"https:\/\/secure.gravatar.com\/avatar\/d661ab6b5aac096b40cc2fa83c39cd8f?s=24&d=mm&r=g","48":"https:\/\/secure.gravatar.com\/avatar\/d661ab6b5aac096b40cc2fa83c39cd8f?s=48&d=mm&r=g","96":"https:\/\/secure.gravatar.com\/avatar\/d661ab6b5aac096b40cc2fa83c39cd8f?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users"}]}}],"wp:featuredmedia":[{"id":832,"date":"2019-08-02T15:15:21","slug":"rxswift-combine-election-1","type":"attachment","link":"https:\/\/quickbirdstudios.com\/blog\/combine-vs-rxswift\/rxswift-combine-election-1\/","title":{"rendered":"RxSwift Combine Election (1)"},"author":4,"caption":{"rendered":"<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-Election-1.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/combine-vs-rxswift\/rxswift-combine-election-1\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-Election-1.jpg\" data-pin-description=\"RxSwift Combine Election (1)\"\/>"},"alt_text":"","media_type":"image","mime_type":"image\/jpeg","media_details":{"width":980,"height":388,"file":"2019\/08\/RxSwift-Combine-Election-1.jpg","sizes":{"thumbnail":{"file":"RxSwift-Combine-Election-1-150x150.jpg","width":150,"height":150,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-Election-1-150x150.jpg"},"medium":{"file":"RxSwift-Combine-Election-1-300x119.jpg","width":300,"height":119,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-Election-1-300x119.jpg"},"medium_large":{"file":"RxSwift-Combine-Election-1-768x304.jpg","width":768,"height":304,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-Election-1-768x304.jpg"},"spatial-index":{"file":"RxSwift-Combine-Election-1-840x388.jpg","width":840,"height":388,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-Election-1-840x388.jpg"},"spatial-masonry":{"file":"RxSwift-Combine-Election-1-550x218.jpg","width":550,"height":218,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-Election-1-550x218.jpg"},"full":{"file":"RxSwift-Combine-Election-1.jpg","width":980,"height":388,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-Election-1.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1","keywords":[]}},"source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/08\/RxSwift-Combine-Election-1.jpg","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/832"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/attachment"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=832"}]}}],"wp:term":[[{"id":1,"link":"https:\/\/quickbirdstudios.com\/blog\/category\/uncategorized\/","name":"Uncategorized","slug":"uncategorized","taxonomy":"category","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories\/1"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/taxonomies\/category"}],"wp:post_type":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts?categories=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}],[]]}},{"id":757,"date":"2019-07-01T07:47:04","date_gmt":"2019-07-01T07:47:04","guid":{"rendered":"https:\/\/quickbirdstudios.com\/blog\/?p=757"},"modified":"2019-07-03T08:05:21","modified_gmt":"2019-07-03T08:05:21","slug":"swiftui-vs-android-jetpack-compose","status":"publish","type":"post","link":"https:\/\/quickbirdstudios.com\/blog\/swiftui-vs-android-jetpack-compose\/","title":{"rendered":"SwiftUI vs. Jetpack Compose"},"content":{"rendered":"<h3><img class=\"aligncenter wp-image-814\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack.jpg\" alt=\"\" width=\"800\" height=\"405\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack.jpg 1225w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack-300x152.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack-768x389.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack-1024x518.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack-550x278.jpg 550w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/h3>\n<p>Declarative UI Frameworks are on the rise. After third-party frameworks such as React Native, Litho and Component Kit, Apple and Google finally published their own solutions called Swift UI and Android&#8217;s Jetpack Compose.<\/p>\n<p>Today, we will take a look at both and see where the main differences are, why those frameworks exist and how they change the way we develop apps.<\/p>\n<h3>Why a new UI Framework?<\/h3>\n<p>When talking about declarative UI, most people name frameworks like React or Flutter. Yet, those were not the first that described UI in a declarative manner. Even HTML and Android XML describe UI declaratively, meaning that they describe \u201cwhat it should be like\u201d instead of \u201chow to create it\u201d.<\/p>\n<div class='content-column one_half'><strong>Declarative<\/strong><br \/>\n<script src=\"https:\/\/gist.github.com\/JulianBissekkou\/4afdc877b24ed49c918e4dad01c878ea.js\"><\/script><\/div>\n<div class='content-column one_half'><strong>Imperative<\/strong><br \/>\n<script src=\"https:\/\/gist.github.com\/JulianBissekkou\/6f013a3e313df74be89adfd8194b7568.js\"><\/script><\/div>\n<p>As you can see, modern declarative UI code feels more intuitive and makes it easier to express complex user interfaces with less code, making the life of us developers easier.<\/p>\n<p>With imperative UI, the developer has to take care of updating every single View according to the data changes. On the other side, declarative UI defines how a View looks in a certain state. The mutated state will be reflected automatically in the UI.<\/p>\n<p>Besides that, SwiftUI and Compose also take some learnings from the last few years of iOS and Android Development into account. SwiftUI, for example, makes it really easy to create a modern iOS app that conforms to the Human Design Guidelines by default and provides decent support for accessibility!<\/p>\n<h3>How does it look like?<\/h3>\n<p>Let\u2019s jump right into some code and take a look at a simple example. We&#8217;ll display two buttons and a label. The label displays a count and the buttons are used to decrement or increment that count.<\/p>\n<p><img class=\"size-medium wp-image-761 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/cropped-screen-171x300.png\" alt=\"\" width=\"171\" height=\"300\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/cropped-screen-171x300.png 171w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/cropped-screen-768x1351.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/cropped-screen-582x1024.png 582w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/cropped-screen-550x967.png 550w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/cropped-screen.png 1385w\" sizes=\"(max-width: 171px) 100vw, 171px\" \/><\/p>\n<p>Both frameworks express this simple piece of UI in a similar way:<\/p>\n<p><span style=\"text-decoration: underline;\">Android&#8217;s Jetpack Compose<\/span><br \/>\n<script src=\"https:\/\/gist.github.com\/JulianBissekkou\/f2a96c68f37991ea22fc6d1c40cd41a6.js\"><\/script><\/p>\n<p><span style=\"text-decoration: underline;\">SwiftUI<\/span><br \/>\n<script src=\"https:\/\/gist.github.com\/JulianBissekkou\/221d05ca53da016a4bb7bd415f525760.js\"><\/script><\/p>\n<p>Just by looking at the structure of the code you can see &#8211; those two snippets look quite similar. Yet, there are a few small but important differences. Let\u2019s break them down:<\/p>\n<h4><strong>1. Structure<\/strong><\/h4>\n<h4>The first big difference is that Compose defines a piece of UI as a function and SwiftUI uses a struct.<br \/>\nThe mental model for a UI component is more bare bones in Compose. It&#8217;s basically just the render function and nothing else. All of these, so called, render functions still need the <code>@Composable<\/code> annotation. Why is that?<br \/>\nCompose is responsible for building and maintaining tree-like data structures that represent the UI tree. These annotations generate code that helps Compose manage this tree. This includes that only the necessary functions are called whenever something changes.<\/h4>\n<p>The Swift UI toolchain does not generate code. In this case,\u00a0we implement the <code>View<\/code> protocol by providing a computed View-property called <code>body<\/code>. This property returns the View tree that can be composed of multiple sub-Views.<\/p>\n<h4><strong>2. State<\/strong><\/h4>\n<p>Most of the times a View is bound to a state object. The View can modify this object and use the information to render the View. Whenever this state changes the View should be updated accordingly.<\/p>\n<p>In our example, the state is called\u00a0<code>count<\/code>\u00a0. This is an instance of\u00a0<code>State<\/code> that wraps the original type <code>Int<\/code>. In Compose this is created using\u00a0<code><span class=\"pl-k\">val<\/span> count <span class=\"pl-k\">=<\/span> <span class=\"pl-k\">+<\/span>state { <span class=\"pl-c1\">0<\/span> }<\/code>\u00a0. SwiftUI uses\u00a0<code>@<span class=\"pl-k\">State<\/span> <span class=\"pl-k\">var<\/span> count <span class=\"pl-k\">=<\/span> <span class=\"pl-c1\">0<\/span><\/code>\u00a0 which is the syntax for a new feature in Swift called <a href=\"https:\/\/www.swiftbysundell.com\/posts\/the-swift-51-features-that-power-swiftuis-api\">property wrappers<\/a>.\u00a0Both frameworks ensure that every consumer of these state objects will be updated whenever the state itself changes!<\/p>\n<h4><strong>3. Defining the UI<\/strong><\/h4>\n<p>SwiftUI and Compose provide Views that give you the ability to align your Views vertically, horizontally or on top of each other. The only big difference here is the naming.\u00a0If you already wrote some Flutter code this concept might look familiar to you.<\/p>\n<table style=\"undefined;table-layout: fixed; width: 208px;\">\n<colgroup>\n<col style=\"width: 200px;\" \/>\n<col style=\"width: 200px;\" \/><\/colgroup>\n<tbody>\n<tr>\n<th><span style=\"font-weight: bold;\">Compose<\/span><\/th>\n<th><span style=\"font-weight: bold;\">SwiftUI<\/span><\/th>\n<\/tr>\n<tr>\n<td>Row<\/td>\n<td>HStack<\/td>\n<\/tr>\n<tr>\n<td>Column<\/td>\n<td>VStack<\/td>\n<\/tr>\n<tr>\n<td>Stack<\/td>\n<td>ZStack<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Styling, on the other hand, looks a little different. Let\u2019s say we want to tint our buttons in a different color. In Compose this is done by passing the color into the function.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/JulianBissekkou\/0c1ec50a93d8e92573f9bb936aa6f1da.js\"><\/script><br \/>\nSwift UI uses View modifiers that wrap or adjust the given View and take care of changing the visuals.<br \/>\n<script src=\"https:\/\/gist.github.com\/JulianBissekkou\/18d542e6f1781de8a04c8ab7f76ae8c8.js\"><\/script><\/p>\n<h3>Tooling<\/h3>\n<p>When designing UIs we like to iterate fast. We don\u2019t want to rebuild our entire app just to see our button in another color. That\u2019s why the new version of Xcode ships with a live preview that not only renders your UI but also lets you interact with it. The inspector was improved as well. You can now click on a View and it will display all the properties that can be tweaked. Once you adjust the property, the code in the editor reflects the change immediately.<\/p>\n<p><iframe src=\"https:\/\/player.vimeo.com\/video\/345646347?autoplay=1&amp;loop=1&amp;title=0&amp;byline=0&amp;portrait=0\" width=\"640\" height=\"352\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><br \/>\nThe current version of Jetpack Compose does not ship with a live preview but this will change in the future since <a href=\"https:\/\/developer.android.com\/jetpack\/compose\">the website promises tools like Apply Changes and live preview<\/a>.<\/p>\n<h3>Under the hood<\/h3>\n<h4>Since Compose is fully open-source we took a look at how things are handled internally.<br \/>\nWe also talked to developers from the\u00a0Jetpack Compose Team who gave us a few more insights.<br \/>\nA really interesting design decision is that Compose is rendering most of its Views directly onto the canvas. The previous examples we showed didn&#8217;t make use of any Android Views internally. However, it is designed to work with Android Views as well. This interoperability is really important since complex Views such as WebView won&#8217;t be replaced anytime soon. Thanks to the Compose compiler the following code snippet works as well.<\/h4>\n<p><script src=\"https:\/\/gist.github.com\/JulianBissekkou\/fdf58367eee7064e4b0c371000ff7f46.js\"><\/script><\/p>\n<p>SwiftUI on the other side is different and less transparent. It <strong>can<\/strong> be a wrapper for NSView or UIView components. It can also be drawn by lower-level technologies. It\u2019s important to understand that it does not have to be that way. SwiftUI is an abstraction layer that does the layouting but the underlying rendering can be different based on the platform it&#8217;s running on.<\/p>\n<p>Developers should split their UI into smaller components that can be reused based on the target platform. SwiftUI is not designed to solve the \u201cwrite once, run anywhere\u201d problem. More like \u201clearn once, write everywhere\u201d.<\/p>\n<h3>Future<\/h3>\n<h4>Since SwiftUI is already in beta we know a lot more about the direction Apple is taking with this UI framework. SwiftUI will most probably be the standard for UI development in the Apple ecosystem. It already provides tools and APIs to ship your app to all different Apple platforms including watchOS or macOS. However, SwiftUI is only supported since macOS Catalina and iOS 13. This means that we won\u2019t see many apps migrating to SwiftUI soon. SwiftUI also makes it easier for Apple to add support for other platforms because of the new abstraction layer! Maybe we will have the option to create websites or progressive web apps with the support of Swift WebAssembly. Third-party developers were already able to build\u00a0<a href=\"https:\/\/github.com\/swiftwebui\/SwiftWebUI\">SwiftWebUI<\/a> in a short amount of time.<\/h4>\n<p>Compose is in pre-alpha now and still in heavy development. It will probably be more than half a year until we can expect a stable version. Google hasn\u2019t revealed any future plans for Compose but there are a few directions where this can go:<\/p>\n<h4><span style=\"text-decoration: underline;\">1. \u201cReplacing\u201d Android&#8217;s native Views.<\/span><\/h4>\n<p>Since Compose is taking care of rendering Views it is mostly decoupled from the operating system&#8217;s View drawing. That also means that you don\u2019t have to wait for your users to adapt to newer Android versions in order to use newer APIs or UI components. You can just update Jetpack Compose and ship your app with new features!<br \/>\nThis is huge if you keep device fragmentation in mind.<\/p>\n<h4><span style=\"text-decoration: underline;\">2. Moving to other platforms:<\/span><\/h4>\n<p>If you look at the Jetpack Compose source code you can see that it provides an abstraction for a canvas which could be implemented by any other target platforms such as iOS, Desktop or the Web.<br \/>\nOf course, there is much more than just the canvas but with Kotlin&#8217;s Multiplatform capabilities, the first steps are made!<\/p>\n<h3>Conclusion<\/h3>\n<p><img class=\"aligncenter wp-image-815\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack-hug.jpg\" alt=\"\" width=\"800\" height=\"405\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack-hug.jpg 1225w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack-hug-300x152.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack-hug-768x389.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack-hug-1024x518.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack-hug-550x278.jpg 550w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<h4>We took a look at similar yet different frameworks that solve the same problem. Making UI development great again!<\/h4>\n<h4>Compose took a few core principles from other frameworks such as Flutter and went for a solution that is more decoupled from the rest of the existing system. A few APIs we saw will probably change in the Future but the early preview already showed how Android UI development could look like in the future.<\/h4>\n<h4>SwiftUI on the other side is investing heavily in growing other platforms in the Apple ecosystem such as watchOS, or macOS by utilizing existing APIs and taking the best from both worlds to make UI development more pleasant.<\/h4>\n<h4>You should definitely keep an eye on both frameworks!<\/h4>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/swiftui-vs-android-jetpack-compose\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack.jpg\" data-pin-description=\"SwiftUI vs. Jetpack Compose\"\/>","protected":false},"excerpt":{"rendered":"<p>Declarative UI Frameworks are on the rise. After third-party frameworks such as React Native, Litho and Component Kit, Apple and Google finally published their own solutions called Swift UI and Android&#8217;s Jetpack Compose. Today, we will take a look at both and see where the main differences are, why those frameworks exist and how they [&hellip;]<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/swiftui-vs-android-jetpack-compose\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack.jpg\" data-pin-description=\"SwiftUI vs. Jetpack Compose\"\/>","protected":false},"author":6,"featured_media":814,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/757"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=757"}],"version-history":[{"count":59,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/757\/revisions"}],"predecessor-version":[{"id":782,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/757\/revisions\/782"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/814"}],"wp:attachment":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=757"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=757"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]},"_embedded":{"author":[{"id":6,"name":"Julian Bissekkou","url":"","description":"","link":"https:\/\/quickbirdstudios.com\/blog\/author\/julian\/","slug":"julian","avatar_urls":{"24":"https:\/\/secure.gravatar.com\/avatar\/e5722b66a2586702d55201b2bd3bb3ad?s=24&d=mm&r=g","48":"https:\/\/secure.gravatar.com\/avatar\/e5722b66a2586702d55201b2bd3bb3ad?s=48&d=mm&r=g","96":"https:\/\/secure.gravatar.com\/avatar\/e5722b66a2586702d55201b2bd3bb3ad?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users"}]}}],"wp:featuredmedia":[{"id":814,"date":"2019-07-02T12:43:33","slug":"comic-swift-jetpack","type":"attachment","link":"https:\/\/quickbirdstudios.com\/blog\/swiftui-vs-android-jetpack-compose\/comic-swift-jetpack\/","title":{"rendered":"Comic swift jetpack"},"author":2,"caption":{"rendered":"<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/swiftui-vs-android-jetpack-compose\/comic-swift-jetpack\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack.jpg\" data-pin-description=\"Comic swift jetpack\"\/>"},"alt_text":"","media_type":"image","mime_type":"image\/jpeg","media_details":{"width":1225,"height":620,"file":"2019\/07\/Comic-swift-jetpack.jpg","sizes":{"thumbnail":{"file":"Comic-swift-jetpack-150x150.jpg","width":150,"height":150,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack-150x150.jpg"},"medium":{"file":"Comic-swift-jetpack-300x152.jpg","width":300,"height":152,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack-300x152.jpg"},"medium_large":{"file":"Comic-swift-jetpack-768x389.jpg","width":768,"height":389,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack-768x389.jpg"},"large":{"file":"Comic-swift-jetpack-1024x518.jpg","width":1024,"height":518,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack-1024x518.jpg"},"spatial-index":{"file":"Comic-swift-jetpack-840x560.jpg","width":840,"height":560,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack-840x560.jpg"},"spatial-masonry":{"file":"Comic-swift-jetpack-550x278.jpg","width":550,"height":278,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack-550x278.jpg"},"full":{"file":"Comic-swift-jetpack.jpg","width":1225,"height":620,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/07\/Comic-swift-jetpack.jpg","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/814"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/attachment"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=814"}]}}],"wp:term":[[{"id":1,"link":"https:\/\/quickbirdstudios.com\/blog\/category\/uncategorized\/","name":"Uncategorized","slug":"uncategorized","taxonomy":"category","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories\/1"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/taxonomies\/category"}],"wp:post_type":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts?categories=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}],[]]}},{"id":725,"date":"2019-06-04T10:12:36","date_gmt":"2019-06-04T10:12:36","guid":{"rendered":"https:\/\/quickbirdstudios.com\/blog\/?p=725"},"modified":"2019-06-14T09:04:02","modified_gmt":"2019-06-14T09:04:02","slug":"keep-87-typeclasses-kotlin","status":"publish","type":"post","link":"https:\/\/quickbirdstudios.com\/blog\/keep-87-typeclasses-kotlin\/","title":{"rendered":"How KEEP-87 & Typeclasses will change the way we write Kotlin"},"content":{"rendered":"<p><img class=\"aligncenter size-full wp-image-728\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Firebird.jpg\" alt=\"\" width=\"1361\" height=\"688\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Firebird.jpg 1361w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Firebird-300x152.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Firebird-768x388.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Firebird-1024x518.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Firebird-550x278.jpg 550w\" sizes=\"(max-width: 1361px) 100vw, 1361px\" \/><\/p>\n<div class=\"note-wrapper\">\n<h2>What is KEEP-87<\/h2>\n<p>At QuickBird Studios, almost all of our projects are implemented in either Koltin or Swift. It\u2019s only natural, that we compare these languages and find features in one of them, that we would also like to see in the other. While Swift\u2019s protocols can sometimes be a little bit painful to work with, they also offer\u00a0<a href=\"https:\/\/docs.swift.org\/swift-book\/LanguageGuide\/Protocols.html\">some features<\/a>\u00a0that our Kotlin team was always jealous of:<\/p>\n<ul>\n<li>Being able to enforce static functions on implementations, as well as initializers (constructors)<\/li>\n<li>Being able to add contract conformance to types outside of the definition of the type itself (implement a protocol as an extension of the type)<\/li>\n<li>Conditional Conformance: Implementing a contract under given constraints for any type<\/li>\n<\/ul>\n<p>Since Kotlin is a rapidly evolving language, there is a place for everyone to submit and discuss proposals for the language. This is called <a href=\"https:\/\/github.com\/Kotlin\/KEEP\">Kotlin Evolution and Enhancement Process (in short KEEP)<\/a>. In the following article, we want to shine a light on the current version of the proposal <a href=\"https:\/\/github.com\/Kotlin\/KEEP\/pull\/87\">KEEP-87<\/a> and explain how it could, very elegantly, solve a lot of problems that we are currently facing. It has been coined &#8220;Typeclasses&#8221; in the initial proposal.<\/p>\n<p><a href=\"https:\/\/github.com\/Kotlin\/KEEP\/pull\/87\">KEEP-87<\/a> was originally proposed by <a href=\"https:\/\/github.com\/raulraja\">raulraja (Ra\u00fal Raja Mart\u00ednez) \u00b7 GitHub<\/a>. <a href=\"https:\/\/github.com\/truizlop\">Tom\u00e1s Ruiz-L\u00f3pez<\/a> and <a href=\"https:\/\/github.com\/JorgeCastilloPrz\">Jorge Castillo<\/a> already build a working <a href=\"https:\/\/github.com\/arrow-kt\/kotlin\/pull\/6\">proof of concept<\/a> that we highly recommend checking out!<\/p>\n<h2>Typeclasses<\/h2>\n<h3>The infamous <code class=\"code-inline\">Any.equals<\/code><\/h3>\n<p>In order to explain why we need <a href=\"https:\/\/github.com\/Kotlin\/KEEP\/pull\/87\">KEEP-87<\/a>, let me explain why I think a function like <code class=\"code-inline\">Any.equals<\/code> is bad.<\/p>\n<h4><strong>1. The Signature of the function: <code class=\"code-inline\">public open operator fun equals(other: Any?): Boolean<\/code><\/strong><\/h4>\n<p>Literally <code class=\"code-inline\">Any<\/code> type of object can be compared with any other type. The signature does not offer any meaningful information about whether or not this comparison actually makes any sense or is \u201esupported\u201c. It is entirely an implementation detail with absolutely no contract that can be enforced. It is the least \u201eType-Safe\u201c way of defining a comparison of two instances, relying only on the truthfulness of the documentation and we all know how well that works.<\/p>\n<h4><strong>2. Subclassing and Symmetry<\/strong><\/h4>\n<p>The <code class=\"code-inline\">equals<\/code> function has to be symmetric.<\/p>\n<p><a href=\"https:\/\/kotlinlang.org\/api\/latest\/jvm\/stdlib\/kotlin\/-any\/equals.html\">Documentation<\/a>:<br \/>\n<script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/8153b5a05e7e00b03462d57703fe251a.js\"><\/script><\/p>\n<p>But this becomes hard when maintaining multiple types in the type hierarchy. Let me give you a very simple example. Let\u2019s say we have a model interface called <code class=\"code-inline\">Dog<\/code> and two implementations for this model. One defined for the network API and the other representing our database entry:<br \/>\n<script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/f59f6fd33f579d3b425dcfe23298930f.js\"><\/script><\/p>\n<p>We have the following requirements:<\/p>\n<ol start=\"1\">\n<li>We want all <code class=\"code-inline\">Dog<\/code> implementations to be compared by their name (case insensitive)<\/li>\n<li>When working with a <code class=\"code-inline\">DatabaseDog<\/code>, we also want to take the dog\u2019s <code class=\"code-inline\">id<\/code> into consideration to compare instances.<\/li>\n<li><code class=\"code-inline\">DatabaseDog<\/code> is required to subclass <code class=\"code-inline\">DatabaseObject<\/code> from our database framework<\/li>\n<\/ol>\n<p>Here is an example of how to implement this (omitting the <code class=\"code-inline\">hashCode<\/code> part for the example)<br \/>\n<script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/fc6f42f37aa668efb6a5d6b7872c2571.js\"><\/script><\/p>\n<p>This code has multiple problems!<\/p>\n<ul>\n<li>Since <code class=\"code-inline\">DatabaseDog<\/code> has to subclass <code class=\"code-inline\">DatabaseObject<\/code>, we were unable to share the common code that compares the name of the dog. Maintaining symmetry here will become a mess later on when requirements change. Changing to a case sensitive comparison will require the developer to go through all implementations with no help by the type system\/compiler.<\/li>\n<li><code class=\"code-inline\">DatabaseDog.equals<\/code> is ambiguous: Let\u2019s say you really want to change the comparison to be case sensitive. So you have to take out all the <code class=\"code-inline\">.toLowerCase()<\/code> parts of the code above, right? Or not? Maybe the case insensitivity is required when comparing two <code class=\"code-inline\">DatabaseDog<\/code> objects inside the database module? From that point, you are unable to differentiate the intention of the code duplication and it is almost impossible to see the original requirement.<\/li>\n<li>It\u2019s wrong. I do not know how many have immediately spotted the mistake in the implementation. <code class=\"code-inline\">AbstractDog.equals<\/code> requires <code class=\"code-inline\">other<\/code> to also subclass <code class=\"code-inline\">AbstractDog<\/code> , instead of implementing <code class=\"code-inline\">Dog<\/code>. This evaluates all comparisons of <code class=\"code-inline\">AbstractDog.equals(DatabaseDog)<\/code> to be <code class=\"code-inline\">false<\/code> while <code class=\"code-inline\">DatabaseDog.equals(AbstractDog)<\/code> will still work. This is easy to fix, but would you have spotted this in a merge request where all those files are defined in a different package? That means, that they might not appear in order when looking at the diff. I do not know if I would have.<\/li>\n<\/ul>\n<h4><strong>3. Only one intention<\/strong><\/h4>\n<p>What if the database module has fundamentally different requirements when comparing two instances than the app module?<\/p>\n<p>Maybe the app module just does not care about anything but the name of the dog, even ignoring the case, while it is mandatory for the database to compare the id and the case sensitive name like:<br \/>\n<script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/0baee66f69248c79292245bc2b78dcaf.js\"><\/script><\/p>\n<p>Covering those two intentions is not possible using one single symmetric <code class=\"code-inline\">.equals<\/code> function!<\/p>\n<h3>Let\u2019s fix <code class=\"code-inline\">Any.equals<\/code> with a Typeclass in plain old Kotlin<\/h3>\n<p>All the problems we face when working with the current <code class=\"code-inline\">equals<\/code> method arise because of one fact: It is defined on the object itself! Let\u2019s pull this function out into another type: <code class=\"code-inline\">Equality&lt;T&gt;<\/code>. Such an interface is called \u201eextension interface\u201c<br \/>\n<script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/e06a9257c7ccc066b164e57c58cc83f8.js\"><\/script><\/p>\n<p>Defining those functions as an extension to <code class=\"code-inline\">T<\/code> might seem inconvenient here, but we will see the reason for it later!<br \/>\nIt is easy now to define the two <code class=\"code-inline\">Equality<\/code> implementations for our app and database module:<br \/>\n<script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/154dde529e7c03916fddfa119df939ee.js\"><\/script><\/p>\n<p>Now we can define extension functions by requiring an implementation of <code class=\"code-inline\">Equality<\/code>. Here are two examples: One top-level comparison of two instances and one to create a distinct list out of any list. We will see both functions being used later to demonstrate the proposal.<br \/>\n<script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/b92fedb525daca1c154def13a5cbf965.js\"><\/script><\/p>\n<p>Now, we can pass in the correct implementation of <code class=\"code-inline\">Equality<\/code> depending on whether or not we are in the app or database module.<\/p>\n<p>Working in our app module:<br \/>\n<script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/c053fbc35372e83804cfd63d4def5178.js\"><\/script><\/p>\n<p>Working in our database module:<br \/>\n<script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/513a631234baad809f96e8ce56e9dd92.js\"><\/script><\/p>\n<p>This approach solves all the problems that <code class=\"code-inline\">Any.equals<\/code> brought to the table:<\/p>\n<ol start=\"1\">\n<li>The signatures are meaningful<\/li>\n<li>Maintaining symmetry is easy, since specific <code class=\"code-inline\">eq<\/code> functions are just defined in one place<\/li>\n<li>We are able to represent multiple intentions (app and database in this example) with this approach without any interference or ambiguity<\/li>\n<\/ol>\n<h2>The KEEP-87 proposal<\/h2>\n<p><img class=\"aligncenter size-full wp-image-729\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Plot.jpg\" alt=\"\" width=\"980\" height=\"634\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Plot.jpg 980w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Plot-300x194.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Plot-768x497.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Plot-550x356.jpg 550w\" sizes=\"(max-width: 980px) 100vw, 980px\" \/><\/p>\n<p>But if this is so easy to fix, why was it built this way?<\/p>\n<p>Well\u2026 it\u2019s actually not that simple. While the approach above might fix the problem of the <code class=\"code-inline\">equals<\/code> function for one model in a particular project, it would not scale well for big projects or deep call chains.<\/p>\n<p>Would you like to search for the correct <code class=\"code-inline\">Equality&lt;T&gt;<\/code> implementation for every type in a big project and then pass it through with every method you call? Just think how much this would bloat Kotlin&#8217;s standard library if we would have to pass through extension interfaces like this every time? But what if we could somehow associate this extension interfaces with the type itself?<\/p>\n<p>Let\u2019s imagine how this could look like by modifying our <code class=\"code-inline\">eq<\/code> extension function. The original\u00a0version of the <code class=\"code-inline\">eq<\/code> function:<br \/>\n<script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/df84bdbd0c62e9c665005746d9fb1dad.js\"><\/script><\/p>\n<p>Here is the first naive idea of something that we would like to write. Instead of passing the <code class=\"code-inline\">equality<\/code> parameter in, we would like to change the signature to only allow a <code class=\"code-inline\">T<\/code> which supports the given <code class=\"code-inline\">Equality&lt;T&gt;<\/code> extensions like<br \/>\n<script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/5695323afbfc2e52a9bc62f996d845b0.js\"><\/script><\/p>\n<p>Now the function only allows types of for <code class=\"code-inline\">T<\/code> that also implement <code class=\"code-inline\">Equality&lt;T&gt;<\/code>.<\/p>\n<p>Wait. Now we ended up where we started, except that a type now has to implement <code class=\"code-inline\">Equality&lt;T&gt;<\/code> which is exactly what we wanted to avoid. We want to have a separate own object that defines our extension functionality and the signature should just require proof if this objects existence!<\/p>\n<p>Okay. So let\u2019s change the signature further. Maybe we can add proof for the existence of this extension object by adding a constraint at the end of the function signature like:<br \/>\n<script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/117bfb6c31d487a6e07ec164a373b90f.js\"><\/script><\/p>\n<p>So this function signature would tell us, that it wants some T, where a <code class=\"code-inline\">Equality&lt;T&gt;<\/code> is given. Okay, but how can we now access the extensions defined by <code class=\"code-inline\">Equality&lt;T&gt;<\/code>? The <code class=\"code-inline\">Equality&lt;T&gt;<\/code> needs to be a receiver in the function body! Just like we did before by starting the function with <code class=\"code-inline\">with(equality { \u2026 }<\/code>! So let\u2019s iterate over the function signature one more time. Let\u2019s consider the <code class=\"code-inline\">Equality<\/code> to be a dependency of the <code class=\"code-inline\">eq<\/code> extension function. What about requesting this dependency as a parameter to the function, but with two modifications:<\/p>\n<ol start=\"1\">\n<li>The parameter to this function shall also become receiver in the function body<\/li>\n<li>The dependency shall be resolved by the compiler for you<\/li>\n<\/ol>\n<p>So here is the current state of the proposal:<br \/>\n<script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/4920da3de38321b05055a452e0ccd5f0.js\"><\/script><\/p>\n<p>A new <code class=\"code-inline\">with<\/code> modifier is introduced to require a compile-time dependency which will become the receiver of the function. Let\u2019s look at our app module where we are able to find two instances of <code class=\"code-inline\">Dog<\/code> by its id. Since we have a <code class=\"code-inline\">Equality&lt;Dog&gt;<\/code> implementation, we can freely use the <code class=\"code-inline\">eq<\/code> extension function.<br \/>\n<script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/49c50c371fcccec19982476e06502438.js\"><\/script><\/p>\n<p>But the newly gained type-safety will prevent us from comparing dogs with other, unsupported types:<br \/>\n<script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/4c73c1c63f0d9c09e8fb471bdf5dd673.js\"><\/script><\/p>\n<p>Also, we cannot use this <code class=\"code-inline\">eq<\/code> function for types where no <code class=\"code-inline\">Equality<\/code> is implemented!<br \/>\n<script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/814ae9bf7481555c32700532bd769dfc.js\"><\/script><\/p>\n<p>Okay! So the function signature now allows us to have a typeclass implementation for a given type as a constraint to the function signature. That\u2019s great! This solves the problem of finding and passing the implementations manually!<\/p>\n<p>But how will the compiler look for these implementations? If we allow them to be placed anywhere, then we will end up in anarchy! We would have no idea of which implementation is actually used? Of course, there is a solution for this which will ensure <a href=\"https:\/\/github.com\/Kotlin\/KEEP\/pull\/87\/files#diff-71ce63753e7dbd24fcb8b631141583ccR292\">compiler coherence<\/a>.<\/p>\n<p>So where does the compiler look for these implementations of the extension interface?<\/p>\n<h3>1. Arguments of the caller function<\/h3>\n<p>When using the <code class=\"code-inline\">eq<\/code> function you are free to pass in any <code class=\"code-inline\">equality<\/code> as a parameter. The compiler lookup can more be seen as something like a default argument to the function. Let\u2019s go back to the non-compiling comparison between two cats. It did not compile, because we did not specify any <code class=\"code-inline\">equality<\/code> as a parameter and the compiler does not know of any <code class=\"code-inline\">Equality&lt;Cat&gt;<\/code> that it can use. Just passing in an implementation yourself will be perfectly fine and has a lot of power!<br \/>\n<script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/9946938ccd14887d45b528af1404882b.js\"><\/script><\/p>\n<h3>2. Companion object of the target type<\/h3>\n<p>If the implementation of the extension interface is not provided as a parameter at the function call site, the compiler will look into the companion object of the target type (e.g. <code class=\"code-inline\">Dog<\/code> ). Here we can see another keyword proposed by KEEP-87: To mark any implementation of an extension interface as such, the <code class=\"code-inline\">extension<\/code> keyword is necessary to support automatic compiler lookup.<br \/>\n<script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/88b0a778b57df3b9b62f57cc4c8541f7.js\"><\/script><\/p>\n<h3>3. Companion object of the contract interface<\/h3>\n<p>If no implementation was found in the companion of the target type, the companion object of the contract will be looked at:<br \/>\n<script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/9985ab3fffd7ee9a97597a183676cf4d.js\"><\/script><\/p>\n<p>This way, the implementer of such a contract interface can add implementations for types that he might not own, like types defined in the StdLib: <code class=\"code-inline\">Int<\/code>, <code class=\"code-inline\">String<\/code>, \u2026<\/p>\n<h3>4 &amp; 5.: Subpackes<\/h3>\n<p>If both, the companion of the target type (<code class=\"code-inline\">Dog<\/code>) as well as the companion of the contract interface (<code class=\"code-inline\">Equality<\/code> ) do not contain the implementation for the given contract for the specified type, then the compiler will first look into sub packages of the target type and then into sub packages of the contract type to resolve these extensions. <b>But<\/b> <a href=\"https:\/\/github.com\/Kotlin\/KEEP\/pull\/87\/files#diff-71ce63753e7dbd24fcb8b631141583ccR534\">such extensions have to be marked as internal and cannot be used outside of the current gradle module.<\/a><\/p>\n<h2>Conclusion<\/h2>\n<p>Hopefully the simple example of the problematic <code class=\"code-inline\">Any.equals<\/code> function was able to show the impact that this proposal would have to the way we currently write Kotlin code. We could think of a bunch of other fundamental Typeclasses that could be implemented nicely with this proposal like:<\/p>\n<ul>\n<li>a hash code for a given instance<\/li>\n<li><a href=\"https:\/\/arrow-kt.io\/docs\/arrow\/typeclasses\/order\/\">Order<\/a>: Defining which instance is considered greater ( &gt;)<\/li>\n<li><a href=\"https:\/\/arrow-kt.io\/docs\/arrow\/typeclasses\/monoid\/\">Monoid<\/a>: Being able to combine two instances<\/li>\n<li>\u2026<\/li>\n<\/ul>\n<p>We think <a href=\"https:\/\/github.com\/Kotlin\/KEEP\/pull\/87\">KEEP-87<\/a> is great and would definitely enable us to write Kotlin code in a way that would have been just not feasible right now. The prototype is nice and I had a good time playing around with it! I was already able to re-model some code that I use in private projects with the new language feature.\u00a0<a href=\"https:\/\/github.com\/Kotlin\/KEEP\/pull\/87\">KEEP-87<\/a> covered all of the things I was jealous about when looking at Swift\u2019s protocols. This article presented the basic features of the proposal and, for sure, there is a lot more we could write about.<\/p>\n<p><a href=\"mailto:contact@quickbirdstudios.com\">Let us know<\/a> if you have any feedback or are interested in a more in-depth look in the proposal and more sophisticated use case examples.<\/p>\n<\/div>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Firebird.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/keep-87-typeclasses-kotlin\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Firebird.jpg\" data-pin-description=\"How KEEP-87 &#038; Typeclasses will change the way we write Kotlin\"\/>","protected":false},"excerpt":{"rendered":"<p>What is KEEP-87 At QuickBird Studios, almost all of our projects are implemented in either Koltin or Swift. It\u2019s only natural, that we compare these languages and find features in one of them, that we would also like to see in the other. While Swift\u2019s protocols can sometimes be a little bit painful to work [&hellip;]<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Firebird.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/keep-87-typeclasses-kotlin\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Firebird.jpg\" data-pin-description=\"How KEEP-87 &#038; Typeclasses will change the way we write Kotlin\"\/>","protected":false},"author":7,"featured_media":728,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/725"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=725"}],"version-history":[{"count":25,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/725\/revisions"}],"predecessor-version":[{"id":754,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/725\/revisions\/754"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/728"}],"wp:attachment":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]},"_embedded":{"author":[{"id":7,"name":"Sebastian Sellmair","url":"","description":"","link":"https:\/\/quickbirdstudios.com\/blog\/author\/sellmair\/","slug":"sellmair","avatar_urls":{"24":"https:\/\/secure.gravatar.com\/avatar\/da409b5f2e5bfc09de7b34ed68df2c89?s=24&d=mm&r=g","48":"https:\/\/secure.gravatar.com\/avatar\/da409b5f2e5bfc09de7b34ed68df2c89?s=48&d=mm&r=g","96":"https:\/\/secure.gravatar.com\/avatar\/da409b5f2e5bfc09de7b34ed68df2c89?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users"}]}}],"wp:featuredmedia":[{"id":728,"date":"2019-05-31T07:29:11","slug":"firebird","type":"attachment","link":"https:\/\/quickbirdstudios.com\/blog\/keep-87-typeclasses-kotlin\/firebird\/","title":{"rendered":"Firebird"},"author":2,"caption":{"rendered":"<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Firebird.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/keep-87-typeclasses-kotlin\/firebird\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Firebird.jpg\" data-pin-description=\"Firebird\"\/>"},"alt_text":"","media_type":"image","mime_type":"image\/jpeg","media_details":{"width":1361,"height":688,"file":"2019\/05\/Firebird.jpg","sizes":{"thumbnail":{"file":"Firebird-150x150.jpg","width":150,"height":150,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Firebird-150x150.jpg"},"medium":{"file":"Firebird-300x152.jpg","width":300,"height":152,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Firebird-300x152.jpg"},"medium_large":{"file":"Firebird-768x388.jpg","width":768,"height":388,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Firebird-768x388.jpg"},"large":{"file":"Firebird-1024x518.jpg","width":1024,"height":518,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Firebird-1024x518.jpg"},"spatial-index":{"file":"Firebird-840x560.jpg","width":840,"height":560,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Firebird-840x560.jpg"},"spatial-masonry":{"file":"Firebird-550x278.jpg","width":550,"height":278,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Firebird-550x278.jpg"},"full":{"file":"Firebird.jpg","width":1361,"height":688,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Firebird.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1","keywords":[]}},"source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/Firebird.jpg","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/728"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/attachment"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=728"}]}}],"wp:term":[[{"id":1,"link":"https:\/\/quickbirdstudios.com\/blog\/category\/uncategorized\/","name":"Uncategorized","slug":"uncategorized","taxonomy":"category","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories\/1"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/taxonomies\/category"}],"wp:post_type":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts?categories=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}],[]]}},{"id":699,"date":"2019-05-06T08:10:23","date_gmt":"2019-05-06T08:10:23","guid":{"rendered":"https:\/\/quickbirdstudios.com\/blog\/?p=699"},"modified":"2019-05-09T11:22:11","modified_gmt":"2019-05-09T11:22:11","slug":"swift-string-parse","status":"publish","type":"post","link":"https:\/\/quickbirdstudios.com\/blog\/swift-string-parse\/","title":{"rendered":"Functional String Parsing in Swift with Ogma: Implementing a Game of Thrones search engine"},"content":{"rendered":"<p><img class=\"aligncenter wp-image-718\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse.jpg\" alt=\"\" width=\"800\" height=\"405\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse.jpg 2000w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse-300x152.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse-768x389.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse-1024x518.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse-550x278.jpg 550w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><strong>&#8212; No Game of Thrones knowledge required and NO spoilers included. Promised. &#8212;<\/strong><\/p>\n<p>Engineers deal with a lot of issues on their day to day: complicated flows, race conditions, general error handling. But one issue that always sticks out is that of parsing strings. At QuickBird Studios, we see ourselves always coming back to it.<\/p>\n<p>Personally, I&#8217;ve always wanted to build my own programming language and have been very interested in the principles and complexities of many languages. Most notably Swift.<br \/>\nIt&#8217;s impressive that string Parsers play such an intricate part in the life of all developers. We all seem to have heard and understood some of the principles of how they work. And yet, I get the feeling we never dive deep enough into it. We always stay way up on the surface level.<\/p>\n<p>So I decided to write a String Parser in Swift. In fact, I wrote a Swift Open Source library called <a href=\"https:\/\/github.com\/nerdsupremacist\/Ogma\">&#8220;Ogma&#8221;<\/a>, to do the exact same thing. Today, I would like to share some thoughts and experiences, as well as present our suggestion on how to implement a clean Parser architecture.<\/p>\n<p>As an example for this post, we will be extending the capabilities for searching through the Wiki of the popular TV Show: Game of Thrones. We are going to add the feature of adding custom filters to a search query.<\/p>\n<p style=\"text-align: center;\"><img class=\"aligncenter size-full wp-image-721\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/main_comp_image.gif\" alt=\"\" width=\"1600\" height=\"1200\" \/><\/p>\n<p style=\"text-align: center;\">(The results in the video are arbitrarily filtered only by &#8220;Stark&#8221;, just to make sure we don&#8217;t show spoilers here)<\/p>\n<p>But before we get to the code, let&#8217;s begin with a very simple question:<\/p>\n<h2>Why should I ever write a String Parser<\/h2>\n<p>Learning possibilities aside, there are a lot of use cases for having to write a Parser in-house:<\/p>\n<ul>\n<li>String Parsers are often needed when dealing with Data Formats such as: JSON, yaml and xml.\n<ul>\n<li>These specific ones might be well established already, and have a Parser in almost every language. Yet, there&#8217;s always the possibility of new formats making their way mainstream<\/li>\n<li>Or who knows? Maybe you have to deal with a custom flavor of JSON that breaks all the String Parsers that currently exist in Swift<\/li>\n<li>Or you decide to write a custom format for your application<\/li>\n<\/ul>\n<\/li>\n<li>Sometimes you also get user input in your application that you need to evaluate or render.\n<ul>\n<li>Like Markdown or a similar markup language<\/li>\n<li>Maybe you have to write a custom search query Parser like <a href=\"https:\/\/searchengineland.com\/wolfram-alpha-fact-engine-18431\">WolframAlpha&#8217;s super cool search function<\/a>. Like our case with Game of Thrones<\/li>\n<\/ul>\n<\/li>\n<li>Or maybe you actually want to write your own programming language, well writing a String Parser is a good start for that.<\/li>\n<\/ul>\n<p>So now let&#8217;s dive deep into how a String Parser works in theory. Shall we?!<\/p>\n<h2>Theory<\/h2>\n<p><img class=\"size-full wp-image-703 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/math-is-coming.jpg\" alt=\"\" width=\"800\" height=\"600\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/math-is-coming.jpg 800w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/math-is-coming-300x225.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/math-is-coming-768x576.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/math-is-coming-550x413.jpg 550w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>So there&#8217;s a lot of theory to be dealt with here, and I&#8217;m risking sounding like Wikipedia explaining these concepts. People who are already familiar with Context Free Grammars and the standard Parser Architecture can just jump right ahead.<br \/>\nI&#8217;ll attempt to make it short and sweet, so this section will be here in case anything from the implementation is unclear ;).<\/p>\n<h3>What is a Formal Language?<\/h3>\n<p>Ok. Let&#8217;s talk about Math. In Math, a language can be seen as a set of all possible words that are considered to be valid.<\/p>\n<p>For example, if you were to start defining the English language you would list every word from A-Z and start by writing the first word in the dictionary: <code>Aardvark<\/code> (which is a hilarious word to write and the name of the animal you see below). Then, you would continue typing for a very very long time until you listed aaall the possible English words. When it comes to English, there&#8217;s no possible way of defining it, without writing down every single possible word there is. That&#8217;s why English is not a Formal Language.<\/p>\n<figure id=\"attachment_705\" aria-describedby=\"caption-attachment-705\" style=\"width: 2121px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-705 size-full\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/aardvark.jpg\" alt=\"\" width=\"2121\" height=\"1414\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/aardvark.jpg 2121w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/aardvark-300x200.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/aardvark-768x512.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/aardvark-1024x683.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/aardvark-840x560.jpg 840w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/aardvark-550x367.jpg 550w\" sizes=\"(max-width: 2121px) 100vw, 2121px\" \/><figcaption id=\"caption-attachment-705\" class=\"wp-caption-text\">The animal called Aardvark, and the first word in the dictionary<\/figcaption><\/figure>\n<p>A Formal Language would then be defined by a set with clear rules on how we can verify that a word is valid.<\/p>\n<p>For example, we can define all possible email addresses as a Formal Language. We know that <code>contact@quickbirdstudios.com<\/code> could be a valid email address but <code>contactquickbirdstudios.com<\/code> is not, because we were expecting an <code>@<\/code> separating the &#8220;local part&#8221; and the domain name.<\/p>\n<p>Now there are a lot\u00a0of\u00a0ways of defining Formal Languages, most notably:<\/p>\n<ul>\n<li>Regular Expressions: if you are not comfortable with regular expressions there are a lot of resources you can check on the topic. We suggest: <a href=\"https:\/\/codeburst.io\/an-introduction-to-regular-expressions-regex-in-javascript-1d3559e7ac9a\">&#8220;An Introduction to Regular Expressions&#8221;<\/a><\/li>\n<li>Context Free Grammars<\/li>\n<\/ul>\n<h3>What is a Context Free Grammar?<\/h3>\n<p>A Context Free Grammar is a way of describing the rules for a Formal Lanuage. More specifically a Context Free Language (go figure!).<\/p>\n<p>For instance let&#8217;s define a simple Grammar for a calculator, where an expression put into the calculator, can either be a number, an addition or a subtraction:<\/p>\n<pre><code>EXPRESSION -&gt; NUMBER | ADDITION | SUBTRACTION\r\nADDITION -&gt; EXPRESSION + EXPRESSION\r\nSUBTRACTION -&gt; EXPRESSION - EXPRESSION\r\n<\/code><\/pre>\n<p>Note that an Addition contains another expression. That way we can easily chain more and more expressions like these together.<\/p>\n<p>You can also read more on Context Free Grammars on <a href=\"https:\/\/www.tutorialspoint.com\/automata_theory\/context_free_grammar_introduction.htm\">Tutorialspoint<\/a>.<\/p>\n<h3>What even is a Parser?<\/h3>\n<p>A Parser is a programm that will take a string as an input, validate if it&#8217;s a well formed word in the language and output a model for us to work with.<\/p>\n<p>Alright! Seems simple enough!<\/p>\n<h3>Ok? And how are Parsers built?<\/h3>\n<p>Very good question! In practice, you want some separation of concerns within your Parser to avoid Technical Debt. One common way is to separate the module into:<\/p>\n<ul>\n<li><strong>Lexer or Tokenizer:<\/strong> a tool that is responsible for pre-classifying a lot of characters, into what we call Tokens.<\/li>\n<li><strong>Tokens:<\/strong> an intermediate representation of our characters, with a bit more meaning attached to them, such as numbers, commas, opening and closing parenthesis.<\/li>\n<li><strong>Parser or Syntactic Analyzer:<\/strong> a component that will turn the pre-computed Tokens into our desired Model. It attempts to derive meaning from a sequence of Tokens as a whole.<\/li>\n<li><strong>Parse Tree:<\/strong> the structured output of the Syntactic Analysis.<\/li>\n<\/ul>\n<p><img class=\"size-full wp-image-706 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse-flow.png\" alt=\"\" width=\"357\" height=\"730\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse-flow.png 357w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse-flow-147x300.png 147w\" sizes=\"(max-width: 357px) 100vw, 357px\" \/><\/p>\n<h2>Building a String Parser with Ogma<\/h2>\n<p>As noted at the beginning, this post is being published alongside a Swift Open Source Framework called Ogma, designed to build Parsers the way they are suggested here.\u00a0<strong>The main Idea:<\/strong> to program a String Parser in Swift, just like you write down a Context Free Grammar.<\/p>\n<p>So here&#8217;s the process, which is very similar to the one portrayed in our theory section:<\/p>\n<ol start=\"\">\n<li><strong>Implement the Model:<\/strong> write down the result you are expecting. This will be the Parse Tree at the end.<\/li>\n<li><strong>Implement the Lexer:<\/strong> Evaluate which Tokens are required by your syntax and map how text should be transformed to these tokens. Don&#8217;t worry, most cases are already implemented for you.<\/li>\n<li><strong>Implement the Parsing:<\/strong> map the transformation from your Tokens to your Model<\/li>\n<\/ol>\n<p>Now, this might look like a lot of work, but rest assured, that it&#8217;s much simpler than you&#8217;d expect. So instead of blabbing on about what there is, let us jump straight into an example.<\/p>\n<h2>Example: Let&#8217;s build a better search for the &#8220;Game Of Thrones&#8221; Wiki<\/h2>\n<p>As the final season of Game Of Thrones started to approach, we at the QuickBird Studios office have been binge-watching all of it. Unfortunately there are sooo many characters in this show. Luckily, there is the <a href=\"https:\/\/gameofthrones.fandom.com\/wiki\/Game_of_Thrones_Wiki\">Game of Thrones Wiki<\/a>, a great tool to keep track of what&#8217;s going on.<\/p>\n<p>However you might have noticed that their search function could use a little love.<br \/>\nI really wanted to be able to add extra filters, with boolean logic. I wished fore some of the great search query power from <a href=\"https:\/\/www.wolframalpha.com\/\">Wolfram Alpha<\/a>, right in this Wiki.<\/p>\n<p>Soooo, let&#8217;s just build it &#8211; Get a seat, grab some popcorn, and let&#8217;s get right into it!<\/p>\n<p><strong>Oh and don&#8217;t worry if you haven&#8217;t seen Game of Thrones yet:<\/strong> This example doesn&#8217;t require any knowledge about the Show and won&#8217;t include any spoilers.<\/p>\n<p><img class=\"size-full wp-image-707 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/popcorn.gif\" alt=\"\" width=\"245\" height=\"165\" \/><\/p>\n<p>Our goal is to have a way to query specific information and use very basic boolean logic. As an example, we&#8217;re searching for people&#8230;<\/p>\n<ol start=\"\">\n<li>&#8230;from House Stark (basically, the good guys)<\/li>\n<li>&#8230;who are still alive<\/li>\n<li>&#8230;whose information matches an additional arbitrary query<\/li>\n<\/ol>\n<pre><code>random query #house = Stark and #status = alive\r\n<\/code><\/pre>\n<p>If we were to parse this example, our ideal output would structured like this (excuse my terrible artistry):<\/p>\n<p><img class=\"size-full wp-image-708 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parsed-tree.png\" alt=\"\" width=\"974\" height=\"554\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parsed-tree.png 974w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parsed-tree-300x171.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parsed-tree-768x437.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parsed-tree-550x313.png 550w\" sizes=\"(max-width: 974px) 100vw, 974px\" \/><\/p>\n<h3>Our Grammar<\/h3>\n<p>Let&#8217;s begin by defining our Context Free Grammar for this case. We want the user to type a normal search query followed by the more specific filters. So we can say our Grammar roughly looks like this:<\/p>\n<ul>\n<li>A <code>Query<\/code> is a sequence of <code>Keywords<\/code> followed by an optional <code>Filter<\/code><\/li>\n<li>A <code>Filter<\/code> can be:\n<ul>\n<li>an <code>Equality<\/code> check (is property A equal to B),<\/li>\n<li>a combination of two filters via an <code>AND<\/code> or <code>OR<\/code> gate,<\/li>\n<li>or a <code>Filter<\/code> wrapped in parenthesis<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Written down on paper, we could define it as follows:<\/p>\n<pre><code>QUERY -&gt; KEYWORD* FILTER?\r\nFILTER -&gt; EQUALITY | AND_FILTER | OR_FILTER | (FILTER)\r\nEQUALITY -&gt; #PROPERTY = VALUE\r\nAND_FILTER -&gt; FILTER and FILTER\r\nOR_FILTER -&gt; FILTER or FILTER\r\n<\/code><\/pre>\n<p>With our grammar written down we can begin with our steps:<\/p>\n<h3>1. Writing our Model<\/h3>\n<p>As discussed our Model is basically our Parse Tree. We should be able to read what the user wanted from this Model alone.<\/p>\n<p>So we begin with the Query, roughly as explained above:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/nerdsupremacist\/6649baecc2382c588ccc856d8de24786.js\"><\/script><\/p>\n<p>Now we can model the individual parts such as the Keywords:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/nerdsupremacist\/39718c92d83d633b20d5dd41bf5514cf.js\"><\/script><\/p>\n<p>And the structure of a Filter:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/nerdsupremacist\/440fea6e67dbb72e862569b1d5730340.js\"><\/script><\/p>\n<p>Here in the Filter we mention an <code>Equality<\/code>, which models a Filter that checks for equality between a property and a value, like <code>#house = Stark<\/code> in our original example. We model it using structs:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/nerdsupremacist\/271578b09882b9289d2ec071889d89be.js\"><\/script><\/p>\n<p>In this scenario we are also using <code>BinaryOperation<\/code>, which is a struct already included in Ogma, that will deal with the parsing operations as well as operator precedence for us. The generic parameter for <code>BinaryOperation<\/code> just means that on each side of the operation will be a <code>Filter<\/code>.<\/p>\n<p>Now, we define the operations. For this we also have to implement <code>MemberOfBinaryOperation<\/code>, to signal that it can be used for Binary Operations:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/nerdsupremacist\/5644cbcd72b03e1efaa794fcf2165960.js\"><\/script><\/p>\n<p>We are now providing the operator precedence via the position in the enum. This means that <code>and<\/code> always goes before <code>or<\/code>. Really handy, isn&#8217;t it?<\/p>\n<h3>2. Implementing our Lexer<\/h3>\n<p>To write our Lexer we first have to decide what our tokens are. By the looks of our Grammar, we have to support:<\/p>\n<ul>\n<li>Single Words<\/li>\n<li>#<\/li>\n<li>=<\/li>\n<li>parenthesis<\/li>\n<\/ul>\n<p>We would also like to support String Literals in case the value you&#8217;re comparing is more than one word.<br \/>\nFor example: <code>#title = \"King of the North\"<\/code><\/p>\n<p>So we can write our Token enum:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/nerdsupremacist\/fe4fb201dfa1a451068f7b87d7c8435a.js\"><\/script><\/p>\n<p>A <code>Lexer<\/code> can be built using what we call <code>TokenGenerator<\/code>s. A <code>TokenGenerator<\/code> will attempt to match parts of the String to a <code>Token<\/code>. We will need:<\/p>\n<ul>\n<li><code>WhiteSpaceTokenGenerator<\/code>: that matches any white space. Usefull for ignoring spacing.<\/li>\n<li><code>RegexTokenGenerator<\/code>: that matches a Regular Expression to a Token.<\/li>\n<li><code>StringLiteralTokenGenerator<\/code>: that matches a String inside quotation marks.<\/li>\n<\/ul>\n<p>This way our Lexer can written as:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/nerdsupremacist\/889e404d13fc50398e80f5b3fed38502.js\"><\/script><\/p>\n<h3>3. Parsing<\/h3>\n<p>Now, at the final stage, we just connect the dots. We have to explain how we expect these objects to be composed and how to map the result from them. We do this by letting our model implement <code>Parsable<\/code>, which specifies a <code>Parser<\/code> for each type.<\/p>\n<p>Let&#8217;s start by writing two helpers for <code>Token<\/code>. To make getting words and string literals easier:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/nerdsupremacist\/91875d7a1ec4845ae7dbd2d57017e100.js\"><\/script><\/p>\n<p>Now, with that out of the way, we can model how a Keyword looks like. Let&#8217;s remember what it looked like in our tree:<\/p>\n<p><img class=\"size-full wp-image-709 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/tree-keyword.png\" alt=\"\" width=\"137\" height=\"128\" \/><\/p>\n<p>Since it&#8217;s just a word we can model it as the Parser that attempts to consume the <code>word<\/code> property from a <code>Token<\/code>:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/nerdsupremacist\/2685c000600c80bb081fbc4b496a0318.js\"><\/script><\/p>\n<p>The function <code>consuming<\/code> takes a <code>KeyPath<\/code> of <code>Token<\/code> to try to use that as the output. We can do almost the exact same thing with a Property. Only this time we expect a <code>#<\/code> right before it:<\/p>\n<p><img class=\"size-full wp-image-710 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/tree-property.png\" alt=\"\" width=\"152\" height=\"117\" \/><\/p>\n<p><script src=\"https:\/\/gist.github.com\/nerdsupremacist\/b126bf35fcd180dbae25c804666e3ddf.js\"><\/script><\/p>\n<p>By using the <code>&amp;&amp;<\/code> operator we create a chain. It is expecting a <code>Token.hash<\/code> followed by a word.<\/p>\n<p>Next, for our Value it can either be a bare word or a String literal:<\/p>\n<p><img class=\"size-full wp-image-711 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/tree-value.png\" alt=\"\" width=\"89\" height=\"117\" \/><\/p>\n<p><script src=\"https:\/\/gist.github.com\/nerdsupremacist\/69c97877a46f0201e560e5104e4dc5ed.js\"><\/script><\/p>\n<p>This time we&#8217;re using the <code>||<\/code> operator to signal that we want to use the first result that succeeds. If it&#8217;s not a bare word, then try a string literal.<\/p>\n<p>Now our <code>Equality<\/code> struct just has to be a property, followed by a <code>=<\/code>, followed by a value:<\/p>\n<p><img class=\"size-full wp-image-712 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/tree-equality.png\" alt=\"\" width=\"293\" height=\"116\" \/><\/p>\n<p><script src=\"https:\/\/gist.github.com\/nerdsupremacist\/bfafcc3293bbb234f24b42a2a1b8399f.js\"><\/script><\/p>\n<p>Notice that we&#8217;re just chaining the types that we are expecting to be there. And simply mapping the result to our struct.<\/p>\n<p>We are almost done with our <code>Filter<\/code>:<\/p>\n<p><img class=\"size-full wp-image-713 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/tree-filter.png\" alt=\"\" width=\"461\" height=\"201\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/tree-filter.png 461w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/tree-filter-300x131.png 300w\" sizes=\"(max-width: 461px) 100vw, 461px\" \/><\/p>\n<p><script src=\"https:\/\/gist.github.com\/nerdsupremacist\/06d7132c11dc363964f942a6d22222e1.js\"><\/script><\/p>\n<p>We&#8217;re again using the <code>||<\/code> operator to combine multiple possibilities. But this time we&#8217;re also using <code>Filter<\/code> to define <code>Filter<\/code> again in:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/nerdsupremacist\/e8b92afa29795cc544333c11143b7714.js\"><\/script><\/p>\n<p>This just means that it&#8217;s also allowed to have a Filter again, but wrapped in parenthesis like so: <code>(FILTER)<\/code><\/p>\n<p>Finally the only type where we have to implement <code>Parsable<\/code> is our Query:<\/p>\n<p><img class=\"size-full wp-image-714 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/tree-query.png\" alt=\"\" width=\"508\" height=\"157\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/tree-query.png 508w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/tree-query-300x93.png 300w\" sizes=\"(max-width: 508px) 100vw, 508px\" \/><\/p>\n<p><script src=\"https:\/\/gist.github.com\/nerdsupremacist\/85155e1d9a49d395119bf70996305f0e.js\"><\/script><\/p>\n<p>This time using the <code>*<\/code> postfix to signal that it can happen any number of times in a sequence and by using <code>Filter?<\/code> to signal that it&#8217;s optional and it should not fail it it isn&#8217;t there.<\/p>\n<p>Let&#8217;s test it out to see what we get!<\/p>\n<p><script src=\"https:\/\/gist.github.com\/nerdsupremacist\/421671680d0889c44168826d7ae0127f.js\"><\/script><\/p>\n<p>And get as an output:<\/p>\n<pre><code>{\r\n  keywords = 2 values {\r\n    [0] = \"random\"\r\n    [1] = \"query\"\r\n  }\r\n  filter = operation {\r\n    lhs = equality = {\r\n      property = \"house\"\r\n      value = \"Stark\"\r\n    }\r\n    rhs = equality = {\r\n      property = \"status\"\r\n      value = \"alive\"\r\n    }\r\n    operator = and\r\n  }\r\n}\r\n<\/code><\/pre>\n<p>So that&#8217;s it! We built a Parser, for our own custom search queries!!!<br \/>\nAnd only using very small pure functions \ud83e\udd1f\ud83c\udffc\ud83d\udcaa\ud83c\udffc\ud83d\ude0e.<\/p>\n<p><em>You can see the full implementation <a href=\"https:\/\/gist.github.com\/nerdsupremacist\/50e264096f7ac0f36396277224880267\">here<\/a>.<\/em><\/p>\n<h3>Conclusion of writing a String Parser in Swift<\/h3>\n<p>Look! Writing reliable software is hard. And writing software that understands text can be one of the more complicated tasks. Most of the time, we developers use Parsers that were built by someone else with more experience. But in our opinion, Ogma is a good way to build a custom parser crafted to match your needs if you:<\/p>\n<ul>\n<li>don&#8217;t have a pre-made solution available<\/li>\n<li>or want to support extra cases that aren&#8217;t standard yet (like parsing specific search queries)<\/li>\n<li>or don&#8217;t want to rely on someone else&#8217;s implementation, that might also become outdated over time<\/li>\n<li>or prefer the flexibility that comes with using your own parser<\/li>\n<\/ul>\n<p>It&#8217;s mainly a good start if you want to play connect the dots, and have a working product quickly, that&#8217;s easy to extend and maintain. Which is freaking awesome!<\/p>\n<p>There are a lot more examples on what this Library can do. For instance to see our own short implementation of a fully working JSON Parser go here: <a href=\"https:\/\/gist.github.com\/nerdsupremacist\/8558223183db9d9a71fbfe790fdadf0a\">Link to Code<\/a>.<\/p>\n<p>If you&#8217;re interested more in the Topic, please do check out the library on <a href=\"https:\/\/github.com\/nerdsupremacist\/Ogma\">GitHub<\/a>! Or check out any of the following resources on the topic:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.swiftbysundell.com\/posts\/string-parsing-in-swift\">John Sundell&#8217;s Article on Parsing in Swift<\/a><\/li>\n<li><a href=\"https:\/\/harlanhaskins.com\/2017\/01\/08\/building-a-compiler-with-swift-in-llvm-part-1-introduction-and-the-lexer.html\">Harlan Haskins&#8217; Article on Compiler Construction in Swift<\/a><\/li>\n<li><a href=\"https:\/\/medium.freecodecamp.org\/the-programming-language-pipeline-91d3f449c919\">William W World&#8217;s Article on Compiler Construction<\/a><\/li>\n<li><a href=\"http:\/\/notes.eatonphil.com\/writing-a-simple-json-parser.html\">Phil Eaton&#8217;s Article on Writing a JSON Parser<\/a><\/li>\n<li><a href=\"http:\/\/www2.in.tum.de\/hp\/Main?nid=371\">The Class on Compiler Construction from the Technical University of Munich<\/a><\/li>\n<\/ul>\n<p>We&#8217;ll be here watching Season 8 unfold. Happy Hacking \u2764\ufe0f<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/swift-string-parse\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse.jpg\" data-pin-description=\"Functional String Parsing in Swift with Ogma: Implementing a Game of Thrones search engine\"\/>","protected":false},"excerpt":{"rendered":"<p>&#8212; No Game of Thrones knowledge required and NO spoilers included. Promised. &#8212; Engineers deal with a lot of issues on their day to day: complicated flows, race conditions, general error handling. But one issue that always sticks out is that of parsing strings. At QuickBird Studios, we see ourselves always coming back to it. [&hellip;]<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/swift-string-parse\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse.jpg\" data-pin-description=\"Functional String Parsing in Swift with Ogma: Implementing a Game of Thrones search engine\"\/>","protected":false},"author":10,"featured_media":718,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/699"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=699"}],"version-history":[{"count":9,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/699\/revisions"}],"predecessor-version":[{"id":722,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/699\/revisions\/722"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/718"}],"wp:attachment":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=699"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=699"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]},"_embedded":{"author":[{"id":10,"name":"Mathias Quintero","url":"","description":"","link":"https:\/\/quickbirdstudios.com\/blog\/author\/mathias-quintero\/","slug":"mathias-quintero","avatar_urls":{"24":"https:\/\/secure.gravatar.com\/avatar\/d2faca333f3609fa064d9963f2359d65?s=24&d=mm&r=g","48":"https:\/\/secure.gravatar.com\/avatar\/d2faca333f3609fa064d9963f2359d65?s=48&d=mm&r=g","96":"https:\/\/secure.gravatar.com\/avatar\/d2faca333f3609fa064d9963f2359d65?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users"}]}}],"wp:featuredmedia":[{"id":718,"date":"2019-05-07T10:48:20","slug":"parse","type":"attachment","link":"https:\/\/quickbirdstudios.com\/blog\/swift-string-parse\/parse\/","title":{"rendered":"parse"},"author":2,"caption":{"rendered":"<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/swift-string-parse\/parse\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse.jpg\" data-pin-description=\"parse\"\/>"},"alt_text":"","media_type":"image","mime_type":"image\/jpeg","media_details":{"width":2000,"height":1012,"file":"2019\/05\/parse.jpg","sizes":{"thumbnail":{"file":"parse-150x150.jpg","width":150,"height":150,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse-150x150.jpg"},"medium":{"file":"parse-300x152.jpg","width":300,"height":152,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse-300x152.jpg"},"medium_large":{"file":"parse-768x389.jpg","width":768,"height":389,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse-768x389.jpg"},"large":{"file":"parse-1024x518.jpg","width":1024,"height":518,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse-1024x518.jpg"},"spatial-index":{"file":"parse-840x560.jpg","width":840,"height":560,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse-840x560.jpg"},"spatial-masonry":{"file":"parse-550x278.jpg","width":550,"height":278,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse-550x278.jpg"},"full":{"file":"parse.jpg","width":2000,"height":1012,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1","keywords":[]}},"source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/05\/parse.jpg","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/718"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/attachment"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=718"}]}}],"wp:term":[[{"id":1,"link":"https:\/\/quickbirdstudios.com\/blog\/category\/uncategorized\/","name":"Uncategorized","slug":"uncategorized","taxonomy":"category","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories\/1"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/taxonomies\/category"}],"wp:post_type":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts?categories=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}],[]]}},{"id":660,"date":"2019-03-19T12:04:19","date_gmt":"2019-03-19T12:04:19","guid":{"rendered":"https:\/\/quickbirdstudios.com\/blog\/?p=660"},"modified":"2019-03-22T11:27:04","modified_gmt":"2019-03-22T11:27:04","slug":"is-kotlin-native-production-ready","status":"publish","type":"post","link":"https:\/\/quickbirdstudios.com\/blog\/is-kotlin-native-production-ready\/","title":{"rendered":"Is Kotlin\/Native production ready? Why we are not using it (yet)"},"content":{"rendered":"<div class=\"note-wrapper\">\n<p><img class=\"aligncenter wp-image-683\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Kotlin-2.jpg\" alt=\"\" width=\"1000\" height=\"506\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Kotlin-2.jpg 2000w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Kotlin-2-300x152.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Kotlin-2-768x389.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Kotlin-2-1024x518.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Kotlin-2-550x278.jpg 550w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>We love the idea of Kotlin\/Native and Kotlin-Multiplatform. That&#8217;s why we took an in-depth look at it and tried it out in a sample project. We wanted to know if Kotlin\/Native is production ready. Unfortunately, the technology cannot serve our needs right now. Here is why we crave to use Kotlin\/Native and Kotlin Multiplatform but decided against using it in a production project for now.<\/p>\n<h3>Our expectations<\/h3>\n<p>As a mobile app agency, we have a lot of apps that are developed for iOS and Android at the same time. We, as a team, highly believe in the &#8220;pure native app experience&#8221; and most of our customers also prefer fully native apps.<\/p>\n<p>While there are many upsides of native apps over cross-platform solutions, there are of course also some downsides: We have to allocate separate iOS and Android teams to develop two independent applications. Problems need to be solved twice (to some extent), requirements will often be interpreted twice and the number of bugs and problems tends to be higher as well. We invest all this energy just to build two code bases in pretty similar languages (Kotlin &amp; Swift) which should do the exact same thing.<\/p>\n<p>We tried to solve these pain points of Native App Development <a href=\"https:\/\/quickbirdstudios.com\/blog\/app-architecture-our-functional-mvvm-approach-with-rx\/\">by using an architecture that makes it easier to reuse logic between two code bases<\/a>. But our wish was always to truly share the same logic code between both platforms (using a language that app developers are familiar with like Kotlin\/Swift rather than e.g. C\/C++).<\/p>\n<p>It is obvious that we were really excited once we first glanced over Kotlin\/Native and Kotlin Multiplatform! With this technology, we could separate our apps into two parts, of which one is shared by both platforms (iOS &amp; Android):<\/p>\n<ul>\n<li>App-Frontend: All code that is required to build the UI of the app<\/li>\n<li>App-Backend: Database, Network, Services, <a href=\"https:\/\/quickbirdstudios.com\/blog\/app-architecture-our-functional-mvvm-approach-with-rx\/\">ViewModels<\/a>, \u2026<\/li>\n<\/ul>\n<p>We would be able to develop this App-Backend in pure Kotlin and share it as a library\/module with the Android\/iOS App. The logic (which should be the same for both platforms) gets only written once. At the same time, we can still write a custom native User Interface for each platform. Therefore, the user gets the same awesome native experience as before. All problems solved \ud83d\ude4c\ud83c\udf89\u00a0But are Kotlin\/Native and Kotlin Multiplatform ready to be used in production?<\/p>\n<h3>Our first experience: Gradle<\/h3>\n<p>After Kotlin\/Native 0.9 finally supported IntelliJ and Android Studio, and Kotlin 1.3 <a href=\"https:\/\/kotlinlang.org\/docs\/reference\/whatsnew13.html\">\u201ecompletely reworked the model of multiplatform projects \u201e<\/a> we decided to give our dream a first try! We started to build a sample application, structurally comparable to projects that we usually handle and with the \u201eApp-Backend\/App-Frontend\u201c separation in mind. After painful hours of figuring out how to configure Kotlin-Multiplatform with groovy style <code class=\"code-inline\">build.gradle<\/code> scripts, we had a very simple application set up. It contained multiple modules like <code class=\"code-inline\">app-backend<\/code>, <code class=\"code-inline\">app-backend-login<\/code>, <code class=\"code-inline\">app-backend-registration<\/code>, <code class=\"code-inline\">app-android<\/code>, <code class=\"code-inline\">app-android-ui-login<\/code>, <code class=\"code-inline\">app-android-ui-registration<\/code>, \u2026 where the modules <code class=\"code-inline\">app-backend<\/code> and <code class=\"code-inline\">app-backend-registration<\/code> obviously would target iOS and Android. It compiled and we got the Android app running. So we were happy.<\/p>\n<p>Until we opened the project the next day and were greeted with the IDE marking almost all source files with errors: <a href=\"https:\/\/youtrack.jetbrains.com\/issue\/IDEA-204477\">&#8216;Check your module classpath for missing or conflicting dependencies\u2018 (IDEA-204477)<\/a>. After trying to clean the project we did what all gentle IntelliJ users would do: &#8220;Invalidate caches and restart&#8221;, delete all <code class=\"code-inline\">.iml<\/code> files and nuke all <code class=\"code-inline\">.gradle<\/code> folders. It fixed the problem\u2026until we had to <code class=\"code-inline\">sync<\/code> the IDE with Gradle again! Same issue. We filed the ticket and waited for the next release of Kotlin.<\/p>\n<p>January 23, 2019, <a href=\"https:\/\/blog.jetbrains.com\/kotlin\/2019\/01\/kotlin-1-3-20-released\/\">*Kotlin 1.3.20*<\/a> is released and offers support for Kotlin DSL build scripts in multiplatform projects and its great! Almost all the Gradle pain that we felt is gone. We had auto-completion in the build script and it just felt right to us!<\/p>\n<p>So we picked up our original plan again: Sharing the App-Backend with Android and iOS! After a short period of time, we noticed that syncing the project took extremely long. The reason: Each time we had to <code class=\"code-inline\">sync<\/code> our project it happened to <a href=\"https:\/\/youtrack.jetbrains.com\/issue\/KT-28128\">re-download all Koltin\/Native POM files (KT-28128)<\/a>. Not the biggest problem, since this problem is already fixed for future builds of the kotlin gradle plugin, but still requires some &#8220;Gradle tricks&#8221; to avoid right now.<br \/>\nAfter setting the project up further we figured that we would need some intermediate common source sets in order to be productive. Unfortunately, this is not supported by the Multiplatform Gradle plugin for now <a href=\"https:\/\/youtrack.jetbrains.com\/issue\/KT-27801\" target=\"_blank\" rel=\"noopener\">(Support multilevel multiplatform projects in the new model KT-27801)<\/a>. It is expected to be resolved in the near future.<\/p>\n<p>There are some (dirty) tricks to get around the issues described above but it&#8217;s a bit of a hassle nevertheless.<br \/>\nAfter a while: The Xcode project was set up and we could finally build the <code class=\"code-inline\">.framework<\/code> and were able to consume our App-Backend APIs!<\/p>\n<h3>Interoperability<\/h3>\n<p>Except. We can\u2019t (really) consume our APIs. While I read the (<a href=\"https:\/\/kotlinlang.org\/docs\/reference\/native\/objc_interop.html\">\u201eObjective-C and Swift Interop\u201c<\/a>) document, some very important detail is missing from there, in my opinion. Let\u2019s have a look at one example on how we modeled parts of the App-Backend:<\/p>\n<p><a href=\"https:\/\/gist.github.com\/sellmair\/ddb1cb824c3e074e803eb44dadd095f8\">A_K\/N_1 \u00b7 GitHub<\/a><\/p>\n<p><img class=\"size-full wp-image-667 alignnone\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-4.png\" alt=\"\" width=\"868\" height=\"428\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-4.png 868w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-4-300x148.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-4-768x379.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-4-550x271.png 550w\" sizes=\"(max-width: 868px) 100vw, 868px\" \/><\/p>\n<p>The API described above is a <code class=\"code-inline\">ViewModel<\/code>: It has some inputs that the View can set and some outputs that the View can observe (More information about this pattern here: <a href=\"https:\/\/quickbirdstudios.com\/blog\/app-architecture-our-functional-mvvm-approach-with-rx\/\">App architecture: Functional MVVM with RxJava &amp; RxSwift<\/a>).<\/p>\n<p>But what\u2019s the problem with this API now? Here is what the API looks like from Swift\/Xcode:<\/p>\n<p><img class=\"size-full wp-image-669 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-2.png\" alt=\"\" width=\"1178\" height=\"230\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-2.png 1178w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-2-300x59.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-2-768x150.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-2-1024x200.png 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-2-550x107.png 550w\" sizes=\"(max-width: 1178px) 100vw, 1178px\" \/><\/p>\n<p>The password\u2019s <code class=\"code-inline\">Subject&lt;String&gt;<\/code> loses all its generic information (<a href=\"https:\/\/github.com\/JetBrains\/kotlin-native\/issues\/2429\">Kotlin Generics to Swift Generics. \u00b7 Issue #2429 \u00b7 JetBrains\/kotlin-native \u00b7 GitHub<\/a>). This alone renders our original plan to be not desirable anymore. We thought about modeling our &#8220;App-Backend&#8221; in a way that does not need generics, but this turned out to be extremely hard and does not fit our current style of development at all. We also thought about \u201emaybe we can just live with it\u201c. But no. We need to find another solution.<\/p>\n<p>Okay. So what about developing the iOS &#8220;App-Frontend&#8221; in pure Kotlin\/Native and not using Swift\/Xcode wherever possible? The problem would be gone then, right? Yeah, but now all generic APIs defined by Swift\/ObjC (like parts of the iOS Framework) will lose the generic type when consumed by Kotlin:<\/p>\n<p><img class=\"size-full wp-image-670 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-1.png\" alt=\"\" width=\"1456\" height=\"254\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-1.png 1456w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-1-300x52.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-1-768x134.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-1-1024x179.png 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-1-550x96.png 550w\" sizes=\"(max-width: 1456px) 100vw, 1456px\" \/><\/p>\n<p><img class=\"size-full wp-image-668 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-3.png\" alt=\"\" width=\"926\" height=\"266\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-3.png 926w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-3-300x86.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-3-768x221.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Bild-3-550x158.png 550w\" sizes=\"(max-width: 926px) 100vw, 926px\" \/><\/p>\n<p>Now Kotlin\/Native just sees <code class=\"code-inline\">List&lt;*&gt;<\/code> where we would expect <code class=\"code-inline\">List&lt;UIView&gt;<\/code>. So we are running out of options now! We do not think that consuming the shared App-Backend from Swift nor Kotlin is a viable option for writing the iOS App-Frontend.<\/p>\n<h3>Memory Model<\/h3>\n<p>Okay but not all of our App-Backend code requires generics and we could still share these parts easily, right? So lets quickly re-structure the code we had previously, re-implement some parts in swift and test it: Works on Android \ud83c\udf89. Does not work on iOS \ud83e\udd14<\/p>\n<p>It\u2019s not crashing but it is not doing the right thing either. Looking at the console in Xcode just reveals\u00a0<code class=\"code-inline\">kotlin.TypeCastException<\/code> . Nothing more. We figured it out, after a short phase of trial and error! We love <a href=\"https:\/\/github.com\/Kotlin\/kotlinx.coroutines\">coroutines<\/a> and of course, did we use them for our App-Backend implementation to handle asynchronous and parallel code. But since Kotlin\u2019s memory model works vastly different on Native than on the JVM, there is currently no <a href=\"https:\/\/github.com\/Kotlin\/kotlinx.coroutines\/issues\/462\">support for multi-threaded coroutines on Kotlin\/Native<\/a> or any other common abstraction for multi-threading (you <strong>can<\/strong> use coroutines in Kotlin\/Native and Kotlin-Multiplatform but expressions like <code class=\"code-inline\">withContext(Dispatchers.Default)<\/code> won&#8217;t work in a &#8216;Multiplatform&#8217; context).<\/p>\n<p>We do not think that this missing common ground is just an inconvenience, but also a huge problem for our original plan, to share the App-Backend, since we have a lot of code that requires switching threads. Of course, we have good libraries like <a href=\"https:\/\/github.com\/touchlab\/Stately\">Stately<\/a>, that enables us to write common code that supports state management in multithreaded environments. Unfortunately, this still does not offer any real solution for writing parallel common code and leaks Native platform details into our common source set.<\/p>\n<p>Please don\u2019t get me wrong: Kotlin\/Native\u2019s memory management is great, the new concept could save us a lot of frustrating hours of bug-fixing for our projects. It is the context of &#8220;Multiplatform&#8221; where problems occur and raise doubts, whether a more &#8220;traditional&#8221; memory management model would have fitted better. Obviously, this is exactly the context in which we wanted to apply Kotlin\/Native.<\/p>\n<h3>Conclusion: Is Kotlin\/Native production ready?<\/h3>\n<p>Our assessment after trying Kotlin\/Native and Kotlin Multiplatform for a while now was: Kotlin\/Native is ready for production, but Kotlin Multiplatform is not, at least for our use case at this moment. The Kotlin-Multiplatform Gradle plugin misses some features that we would require, our APIs make heavy use of generics (which are not fully supported for the Swift\/Kotlin interop), and multi-threading is yet-to-be-solved in a delightful manner.<\/p>\n<h3>Future<\/h3>\n<p>While our first experience was pretty rough, we shall not forget that our original plan was pretty ambitious and the technology is young and developing rapidly. Problems that we experienced at the very first beginning, like the difficulties in setting up the <code class=\"code-inline\">build.gradle<\/code> files have been almost wiped out with the introduction of the Kotlin DSL support. And other bugs that we mentioned like the <a href=\"https:\/\/youtrack.jetbrains.com\/issue\/KT-28128\">re-downloading of pom files<\/a> are already fixed for future versions of Kotlin.<\/p>\n<p>We expect to see many major improvements to Kotlin\u2019s Multiplatform approach in the next months. The Swift\/Kotlin interoperability is a known issue, according to one JetBrains employee we talked to, and actively worked on. The missing common ground for multithreading between Kotlin\/Native and the JVM will require <a href=\"https:\/\/github.com\/Kotlin\/kotlinx.coroutines\/issues\/462#issuecomment-450035178\">\u201echanges to Koltin\/Native\u2019s memory model\u201c<\/a> and <a href=\"https:\/\/github.com\/Kotlin\/kotlinx.coroutines\/issues\/462#issuecomment-454414631\">\u201ewe will see a prototype in this year\u201c<\/a><\/p>\n<p>There are still many parts of traditional mobile apps are already suited pretty well for Kotlin-Multiplatform: Maybe sharing the <a href=\"https:\/\/ktor.io\/clients\/http-client\/multiplatform.html\">network<\/a> or <a href=\"https:\/\/github.com\/square\/sqldelight\">database<\/a> code would make a lot of sense for many teams, since there are already pretty great tools that support this technology. We, at QuickBird Studios, will wait for another few months until Kotlin\/Native further matures and are very excited to see where the journey with this awesome idea will head. We highly encourage everyone to try it out and share their experience with the world.<\/p>\n<\/div>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Kotlin-2.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/is-kotlin-native-production-ready\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Kotlin-2.jpg\" data-pin-description=\"Is Kotlin\/Native production ready? Why we are not using it (yet)\"\/>","protected":false},"excerpt":{"rendered":"<p>We love the idea of Kotlin\/Native and Kotlin-Multiplatform. That&#8217;s why we took an in-depth look at it and tried it out in a sample project. We wanted to know if Kotlin\/Native is production ready. Unfortunately, the technology cannot serve our needs right now. Here is why we crave to use Kotlin\/Native and Kotlin Multiplatform but [&hellip;]<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Kotlin-2.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/is-kotlin-native-production-ready\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Kotlin-2.jpg\" data-pin-description=\"Is Kotlin\/Native production ready? Why we are not using it (yet)\"\/>","protected":false},"author":7,"featured_media":683,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/660"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=660"}],"version-history":[{"count":20,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/660\/revisions"}],"predecessor-version":[{"id":691,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/660\/revisions\/691"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/683"}],"wp:attachment":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]},"_embedded":{"author":[{"id":7,"name":"Sebastian Sellmair","url":"","description":"","link":"https:\/\/quickbirdstudios.com\/blog\/author\/sellmair\/","slug":"sellmair","avatar_urls":{"24":"https:\/\/secure.gravatar.com\/avatar\/da409b5f2e5bfc09de7b34ed68df2c89?s=24&d=mm&r=g","48":"https:\/\/secure.gravatar.com\/avatar\/da409b5f2e5bfc09de7b34ed68df2c89?s=48&d=mm&r=g","96":"https:\/\/secure.gravatar.com\/avatar\/da409b5f2e5bfc09de7b34ed68df2c89?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users"}]}}],"wp:featuredmedia":[{"id":683,"date":"2019-03-22T08:26:20","slug":"kotlin-2","type":"attachment","link":"https:\/\/quickbirdstudios.com\/blog\/is-kotlin-native-production-ready\/kotlin-2\/","title":{"rendered":"Kotlin 2"},"author":2,"caption":{"rendered":"<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Kotlin-2.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/is-kotlin-native-production-ready\/kotlin-2\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Kotlin-2.jpg\" data-pin-description=\"Kotlin 2\"\/>"},"alt_text":"","media_type":"image","mime_type":"image\/jpeg","media_details":{"width":2000,"height":1012,"file":"2019\/03\/Kotlin-2.jpg","sizes":{"thumbnail":{"file":"Kotlin-2-150x150.jpg","width":150,"height":150,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Kotlin-2-150x150.jpg"},"medium":{"file":"Kotlin-2-300x152.jpg","width":300,"height":152,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Kotlin-2-300x152.jpg"},"medium_large":{"file":"Kotlin-2-768x389.jpg","width":768,"height":389,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Kotlin-2-768x389.jpg"},"large":{"file":"Kotlin-2-1024x518.jpg","width":1024,"height":518,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Kotlin-2-1024x518.jpg"},"spatial-index":{"file":"Kotlin-2-840x560.jpg","width":840,"height":560,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Kotlin-2-840x560.jpg"},"spatial-masonry":{"file":"Kotlin-2-550x278.jpg","width":550,"height":278,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Kotlin-2-550x278.jpg"},"full":{"file":"Kotlin-2.jpg","width":2000,"height":1012,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Kotlin-2.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/03\/Kotlin-2.jpg","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/683"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/attachment"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=683"}]}}],"wp:term":[[{"id":1,"link":"https:\/\/quickbirdstudios.com\/blog\/category\/uncategorized\/","name":"Uncategorized","slug":"uncategorized","taxonomy":"category","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories\/1"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/taxonomies\/category"}],"wp:post_type":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts?categories=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}],[]]}},{"id":591,"date":"2019-02-20T09:12:29","date_gmt":"2019-02-20T09:12:29","guid":{"rendered":"https:\/\/quickbirdstudios.com\/blog\/?p=591"},"modified":"2019-02-20T10:25:00","modified_gmt":"2019-02-20T10:25:00","slug":"flutter-pull-to-refresh-was-yesterday-checkout-pull-to-reach","status":"publish","type":"post","link":"https:\/\/quickbirdstudios.com\/blog\/flutter-pull-to-refresh-was-yesterday-checkout-pull-to-reach\/","title":{"rendered":"Flutter: Pull-To-Refresh was yesterday. Check out Pull-To-Reach!"},"content":{"rendered":"<p><img class=\"aligncenter wp-image-643\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/banner.jpg\" alt=\"\" width=\"800\" height=\"264\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/banner.jpg 5863w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/banner-300x99.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/banner-768x253.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/banner-1024x338.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/banner-550x181.jpg 550w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Still stuck with Pull-To-Refresh in your Flutter app? \ud83d\ude44\u00a0You&#8217;ll be thrilled to get to know Pull-To-Reach then. That&#8217;s a new way to access controls in your app that are normally hard to reach with your thumb.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is based on the following problem: Phones are getting bigger and bigger. I remember that I could easily carry my phone, headphones and some other stuff in the same pocket without any problems. Now I can barely fit my new phone into the pocket of slightly tighter pants \ud83d\ude05. Besides that this also leads to the problems that certain screen areas, like the top toolbar, are getting harder to reach.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this article, we present a design solution used in the <a href=\"https:\/\/soor.app\/\">Soor.app<\/a>. With Pull-To-Reach, the user can select toolbar items by swiping down rather than stretching his thumb up to the top. We explain how you can implement such functionality for your Flutter app. It&#8217;s a really neat solution that you have to see to know what it means:\u00a0<\/span><\/p>\n<p style=\"text-align: center;\"><iframe src=\"https:\/\/player.vimeo.com\/video\/318191279?autoplay=1&amp;loop=1&amp;color=ffffff&amp;title=0&amp;byline=0&amp;portrait=0\" width=\"400\" height=\"433\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2><b><\/b>The Problem with Phone Sizes<\/h2>\n<p><span style=\"font-weight: 400;\">UX really suffers from bigger screens as this visualization of the thumb reachable area shows:<\/span><\/p>\n<figure id=\"attachment_595\" aria-describedby=\"caption-attachment-595\" style=\"width: 493px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-595\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/reachable-area-300x152.png\" alt=\"\" width=\"493\" height=\"250\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/reachable-area-300x152.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/reachable-area-768x390.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/reachable-area-1024x520.png 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/reachable-area-550x279.png 550w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/reachable-area.png 1378w\" sizes=\"(max-width: 493px) 100vw, 493px\" \/><figcaption id=\"caption-attachment-595\" class=\"wp-caption-text\">by Scott Hurff &#8211; How to design for thumbs in the Era of Huge Screens<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">As you can see, the top part of the screen can\u2019t be reached without some hand gymnastics. Guess what most apps display there?\u00a0<\/span><span style=\"font-weight: 400;\">Right, a AppBar\/Navigation bar!\u00a0<\/span><span style=\"font-weight: 400;\">This View can be essential for some of your app&#8217;s features. The solution to this problem is obvious and simple: Just don\u2019t put all the stuff there. \u2705<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Samsungs OneUI solves this Problem by moving the toolbar down and adding a bigger area at the top that contains UI elements that don\u2019t require user interaction.<\/span><\/p>\n<p><img class=\"size-medium wp-image-597 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/samsung-one-ui-294x300.jpg\" alt=\"\" width=\"294\" height=\"300\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/samsung-one-ui-294x300.jpg 294w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/samsung-one-ui-768x784.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/samsung-one-ui-1003x1024.jpg 1003w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/samsung-one-ui-550x561.jpg 550w\" sizes=\"(max-width: 294px) 100vw, 294px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">The Problem here is that space isn\u2019t used very nicely and I am pretty sure that many apps want to display important information there. Just imagine an App that displays a feed of information.\u00a0<\/span><span style=\"font-weight: 400;\">The question remains the same:\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">What if you don\u2019t want to rethink your whole design but still want to increase reachability?<\/span><\/p>\n<h2>Know Pull-To-Refresh? Get to know Pull-To-Reach!<\/h2>\n<p><span style=\"font-weight: 400;\">The pull gesture isn&#8217;t anything new to smartphone users.\u00a0<\/span>A very basic implementation is the Pull-To-Refresh action in apps like\u00a0<span style=\"font-weight: 400;\">Twitter, Chrome or Instagram.\u00a0<\/span>Pull-To-Reach uses the pull gesture to overcome the problem of accessing the non-reachable controls in the upper area of an app. You pull down and depending on when you release your thumb, a different control in your AppBar is highlighted and triggered.\u00a0<span style=\"font-weight: 400;\">The Soor app is one of the few apps that use this mechanism to access all buttons in the top bar. Here you can see an example of this behavior:<\/span><\/p>\n<p style=\"text-align: center;\"><iframe src=\"https:\/\/player.vimeo.com\/video\/318191279?autoplay=1&amp;loop=1&amp;color=ffffff&amp;title=0&amp;byline=0&amp;portrait=0\" width=\"400\" height=\"433\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><b>Getting our Hands dirty!<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Before writing any widgets, we should specify what we really want to do.\u00a0<\/span><span style=\"font-weight: 400;\">When we drag down and reach the top of the list, the items should be focused from right to left. Once we release our thumb the currently focused item should be selected!<\/span><\/p>\n<p>First, we need a class that transforms the scroll distance into an index. This information needs to be distributed across the screen. Once this is done we can create widgets that consume this information and react to a focus or selection change.<\/p>\n<p><b>Step 1: How much is the user over-scrolling?<\/b><\/p>\n<p><span style=\"font-weight: 400;\">In order to get some information about the focused item, we have to know how much the user is over-scrolling. This is similar to implementing Pull-To-Refresh.\u00a0<\/span><span style=\"font-weight: 400;\">In Flutter, every Scrollable sends Notifications that contains information about the current scroll state. You can catch these notifications by using a <\/span><span style=\"font-weight: 400;\"><code>NotificationListener<\/code> Widget.<\/span><\/p>\n<p><script src=\"https:\/\/gist.github.com\/JulianBissekkou\/40c15c774617419db9e1d09e83beb3cf.js\"><\/script><\/p>\n<p><span style=\"font-weight: 400;\">There are different kinds of ScrollNotifications such as <\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\"><code>ScrollStartNotification<\/code><\/span><\/li>\n<li><span style=\"font-weight: 400;\"><code>ScrollUpdateNotification<\/code><\/span><\/li>\n<li><span style=\"font-weight: 400;\"><code>ScrollEndNotification<\/code><\/span><\/li>\n<li><span style=\"font-weight: 400;\"><code>UserScrollNotification<\/code><\/span><\/li>\n<li><span style=\"font-weight: 400;\"><code>OverscrollNotification<\/code><\/span><\/li>\n<\/ul>\n<p>Easy. So we can simply listen for <code>OverscrollNotifications<\/code>? No, not really, there is a twist. Flutters ListView has a different scroll behavior on Android and iOS. This makes the implementation a little more complex.\u00a0<span style=\"font-weight: 400;\">On iOS, the list bounces down and sends <code>ScrollUpdateNotification<\/code> and on Android, it shows an over-scroll-glow and sends <code>OverscrollNotification<\/code>. We need to handle both cases.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The max scroll distance can be accessed using\u00a0<code>notification.metrics.viewportDimension<\/code>.\u00a0<\/span><br \/>\nNow we have everything we need to calculate the scrolling progress (0 to 1).<\/p>\n<p><script src=\"https:\/\/gist.github.com\/JulianBissekkou\/8df81cf7f792c1c0aeca2864af4b6f46.js\"><\/script><br \/>\n<span style=\"font-weight: 400;\">Step 1 done. Now, we know how much the user is over-scrolling.<\/span><\/p>\n<p><b>Step 2: Map the percentage to an index<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Before we go any further we should move the written code into a widget.<\/span><\/p>\n<p><script src=\"https:\/\/gist.github.com\/JulianBissekkou\/7d3a270bd3e6ece2fca1430cac55e977.js\"><\/script><\/p>\n<p><span style=\"font-weight: 400;\">In addition, we are also disabling Android&#8217;s overscroll glow when the user reaches the top of the List. This happens in <\/span><i><span style=\"font-weight: 400;\">_handleGlowNotification<\/span><\/i><span style=\"font-weight: 400;\">.\u00a0<\/span><span style=\"font-weight: 400;\">We also have to implement the IndexCalculator interface. I will leave that simple math to you \ud83d\ude09<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We can now detect the index for every scroll percent.<\/span><\/p>\n<p><b>Step 3: Create Focus and Select Events<\/b><\/p>\n<p><span style=\"font-weight: 400;\">First, we have to decide how to distribute the focus and select the index across the screen. Flutter offers different ways to share a state between multiple Widgets and in our case, I went for an <code>InheritedWidget<\/code>. Feel free to use something else.<\/span><\/p>\n<p><script src=\"https:\/\/gist.github.com\/JulianBissekkou\/dbf52a53ef9255ead757b0340c495a2e.js\"><\/script><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s wrap our page in this widget and finish the ScrollToIndexConverter.\u00a0<\/span><span style=\"font-weight: 400;\">Whenever the index has changed the <\/span><i><span style=\"font-weight: 400;\">PullToReachScope<\/span><\/i><span style=\"font-weight: 400;\"> should be notified.<\/span><\/p>\n<p><script src=\"https:\/\/gist.github.com\/JulianBissekkou\/b4aa93a69cf357c91505f26bdcb9cb2d.js\"><\/script><\/p>\n<p><span style=\"font-weight: 400;\">If the user releases the finger we have to update the selected index. This is a little tricky since iOS and Android send different notifications.\u00a0<\/span><br \/>\nA <code>ScrollEndNotification<\/code> is sent if the list stops scrolling. For Android, this is fine since the list sends this event whenever the drag ends. On iOS, the list isn\u2019t stopping immediately since it bounces back. We use a little workaround to get this working on iOS as well.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/JulianBissekkou\/f6b0bf5391cb5716616ba55cf22a5132.js\"><\/script><\/p>\n<p><span style=\"font-weight: 400;\">We now have all the necessary information to know when a widget is focused or selected.<\/span><\/p>\n<p><b>Step 4: Adding Reachable Widgets<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Our &lt;code&gt;Reachable&lt;\/code&gt; Widget will use the information stored in the <code>PullToReachScope<\/code> to give use a callback whenever an item with a specific index is focused or selected.\u00a0<\/span><span style=\"font-weight: 400;\">This Widget would look like this:<\/span><\/p>\n<p><script src=\"https:\/\/gist.github.com\/JulianBissekkou\/b8ca603ad0b3c8735285640356d0c56f.js\"><\/script><\/p>\n<p><span style=\"font-weight: 400;\">Now we can compose this widget and implement visual feedback for focus and some routing when it&#8217;s selected! <\/span><span style=\"font-weight: 400;\">Here is an example of a <code>ReachableIcon<\/code> that shows a circular background when its in focus.<\/span><\/p>\n<p><script src=\"https:\/\/gist.github.com\/JulianBissekkou\/b9aeb684416ae7aecb20f82fe0eccdd7.js\"><\/script><\/p>\n<p><span style=\"font-weight: 400;\">Creating an AppBar with <code>ReachableIcon<\/code>s is now done in a few seconds!<\/span><\/p>\n<p><script src=\"https:\/\/gist.github.com\/JulianBissekkou\/b5a79abb7893d0e3d6eeb9facb0995dc.js\"><\/script><\/p>\n<h2>Conclusion<\/h2>\n<p><span style=\"font-weight: 400;\">We think Pull-To-Reach is nice design solution inspired by what people know from Pull-To-Refresh. It feels very natural and people understand it in no time at all. In this, we created the Foundation for our Pull-To-Reach mechanism that is customizable and easy to integrate. We are now able to reach the top ui elements in our app by adding just a few lines to the existing screen.\u00a0<\/span><span style=\"font-weight: 400;\">Pretty cool I\u2019d say.\u00a0\ud83d\ude0e\u00a0<\/span><\/p>\n<p>Pull-To-Reach is available as library here:\u00a0<a href=\"https:\/\/github.com\/TiO-Design\/pull_to_reach\">https:\/\/github.com\/TiO-Design\/pull_to_reach<\/a>.<\/p>\n<p>And you can also check out the source code of this article here:\u00a0<a href=\"https:\/\/github.com\/quickbirdstudios\/flutter_pull_to_reach_demo\">https:\/\/github.com\/quickbirdstudios\/flutter_pull_to_reach_demo<\/a><\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/banner.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/flutter-pull-to-refresh-was-yesterday-checkout-pull-to-reach\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/banner.jpg\" data-pin-description=\"Flutter: Pull-To-Refresh was yesterday. Check out Pull-To-Reach!\"\/>","protected":false},"excerpt":{"rendered":"<p>Still stuck with Pull-To-Refresh in your Flutter app? \ud83d\ude44\u00a0You&#8217;ll be thrilled to get to know Pull-To-Reach then. That&#8217;s a new way to access controls in your app that are normally hard to reach with your thumb. This is based on the following problem: Phones are getting bigger and bigger. I remember that I could easily [&hellip;]<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/banner.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/flutter-pull-to-refresh-was-yesterday-checkout-pull-to-reach\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/banner.jpg\" data-pin-description=\"Flutter: Pull-To-Refresh was yesterday. Check out Pull-To-Reach!\"\/>","protected":false},"author":6,"featured_media":643,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/591"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=591"}],"version-history":[{"count":53,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/591\/revisions"}],"predecessor-version":[{"id":644,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/591\/revisions\/644"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/643"}],"wp:attachment":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]},"_embedded":{"author":[{"id":6,"name":"Julian Bissekkou","url":"","description":"","link":"https:\/\/quickbirdstudios.com\/blog\/author\/julian\/","slug":"julian","avatar_urls":{"24":"https:\/\/secure.gravatar.com\/avatar\/e5722b66a2586702d55201b2bd3bb3ad?s=24&d=mm&r=g","48":"https:\/\/secure.gravatar.com\/avatar\/e5722b66a2586702d55201b2bd3bb3ad?s=48&d=mm&r=g","96":"https:\/\/secure.gravatar.com\/avatar\/e5722b66a2586702d55201b2bd3bb3ad?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users"}]}}],"wp:featuredmedia":[{"id":643,"date":"2019-02-19T14:26:30","slug":"banner","type":"attachment","link":"https:\/\/quickbirdstudios.com\/blog\/flutter-pull-to-refresh-was-yesterday-checkout-pull-to-reach\/banner\/","title":{"rendered":"banner"},"author":2,"caption":{"rendered":"<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/banner.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/flutter-pull-to-refresh-was-yesterday-checkout-pull-to-reach\/banner\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/banner.jpg\" data-pin-description=\"banner\"\/>"},"alt_text":"","media_type":"image","mime_type":"image\/jpeg","media_details":{"width":5863,"height":1934,"file":"2019\/02\/banner.jpg","sizes":{"thumbnail":{"file":"banner-150x150.jpg","width":150,"height":150,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/banner-150x150.jpg"},"medium":{"file":"banner-300x99.jpg","width":300,"height":99,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/banner-300x99.jpg"},"medium_large":{"file":"banner-768x253.jpg","width":768,"height":253,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/banner-768x253.jpg"},"large":{"file":"banner-1024x338.jpg","width":1024,"height":338,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/banner-1024x338.jpg"},"spatial-index":{"file":"banner-840x560.jpg","width":840,"height":560,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/banner-840x560.jpg"},"spatial-masonry":{"file":"banner-550x181.jpg","width":550,"height":181,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/banner-550x181.jpg"},"full":{"file":"banner.jpg","width":5863,"height":1934,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/banner.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1","keywords":[]}},"source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/02\/banner.jpg","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/643"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/attachment"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=643"}]}}],"wp:term":[[{"id":1,"link":"https:\/\/quickbirdstudios.com\/blog\/category\/uncategorized\/","name":"Uncategorized","slug":"uncategorized","taxonomy":"category","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories\/1"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/taxonomies\/category"}],"wp:post_type":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts?categories=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}],[]]}},{"id":513,"date":"2019-01-09T14:19:38","date_gmt":"2019-01-09T14:19:38","guid":{"rendered":"https:\/\/quickbirdstudios.com\/blog\/?p=513"},"modified":"2019-07-25T12:35:44","modified_gmt":"2019-07-25T12:35:44","slug":"swift-dependency-injection-service-locators","status":"publish","type":"post","link":"https:\/\/quickbirdstudios.com\/blog\/swift-dependency-injection-service-locators\/","title":{"rendered":"Dependency Injection Strategies in Swift"},"content":{"rendered":"<p><img class=\"aligncenter wp-image-549\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Swift-addict.jpg\" alt=\"\" width=\"1000\" height=\"506\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Swift-addict.jpg 2000w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Swift-addict-300x152.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Swift-addict-768x389.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Swift-addict-1024x518.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Swift-addict-550x278.jpg 550w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>Today we will take a deep look at <b>Dependency Injection <\/b>in Swift, one of the most important techniques in software development and a heavily used concept in many programming languages. Specifically, we&#8217;ll explore which strategies\/patterns we can use, including the <strong>Service Locator<\/strong> pattern in Swift.<\/p>\n<p>The intent behind <em>Dependency Injection<\/em> is to decouple objects by having <i>one object supplying the dependencies of another object<\/i>. It is used to provide different configurations to modules and is especially useful for providing mocked dependencies for (unit-)testing your modules and\/or applications.<\/p>\n<p>We will use the term <em>Dependency Injection<\/em>\u00a0in this article only as the design pattern that describes how one object can supply dependencies to other objects. Don&#8217;t confuse <em>Dependency Injection<\/em>\u00a0with frameworks or libraries that help you injecting your dependencies.<\/p>\n<h2>Why should I use it?<\/h2>\n<p><b>Dependency Injection<\/b> helps us to make our components less coupled and more reusable in different contexts. Basically, it is one form of <i>Separation of Concerns<\/i>, because it separates the algorithm using the dependencies from their initialization and configuration. To achieve that, we can apply different techniques to inject dependencies into our modules.<\/p>\n<p>As mentioned above, one really important aspect of Dependency Injection is that it makes our code more testable. We can inject mock instances for the dependencies of our classes\/modules we want to test. This allows us to focus our tests on the unit of code in the module and make sure that this part is working as expected, without having fuzzy side effects that lead to unclear test failures, because one of its dependencies is not behaving as expected. These dependencies should be tested on their own, to find the real mistakes easier and speed up your development workflow.<\/p>\n<p>We described our testing strategies already in <a href=\"https:\/\/quickbirdstudios.com\/blog\/testing-mobile-apps-an-overview\/\">one of our previous articles<\/a>. Make sure to read that article if you want to learn more about our testing setup.<\/p>\n<p>Additionally, <strong>D<\/strong><b>ependency Injection<\/b> allows us to bypass one of the most common mistakes in software development: Over- and misuse of <i>singletons<\/i> in your codebase. If you want to read more about why singletons are (often) bad, take a look at articles like <a href=\"https:\/\/cocoacasts.com\/are-singletons-bad\">that<\/a> or <a href=\"http:\/\/wiki.c2.com\/?SingletonsAreEvil\">that<\/a>.<\/p>\n<h2>Different strategies to do Dependency Injection in Swift<\/h2>\n<p>There are a lot of ways to use <em>Dependency Injection<\/em> when working on your Swift codebase. Most principles also apply to other programming languages, even though in most other environments (especially in the Java community) people tend to use special Dependency Injection frameworks to do the heavy lifting for them.<\/p>\n<p>And yes, there exist also <em>Dependency Injection<\/em> frameworks for Swift out there. The most popular one is <a href=\"https:\/\/github.com\/Swinject\/Swinject\">Swinject<\/a> with a rich feature set and a big community. But today we are going to show you some simple tricks to inject your dependencies without introducing just another huge third-party framework.<\/p>\n<h3>Initializer-based Dependency Injection<\/h3>\n<p>The most common way to inject dependencies in Swift is by passing the dependencies as <i>parameters to the init functions<\/i> and then storing them as member variables of your classes. This method is called\u00a0<strong>Initializer-based Dependency Injection<\/strong>.<\/p>\n<p>To see that technique in action let&#8217;s take a look at a short example of a <i>service class<\/i> that uses a <i>repository<\/i> object to fetch the data.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/1da424e8786ed41557813f6dc60456c5.js\"><\/script><\/p>\n<p>We inject a <i>repository<\/i> to our <code class=\"code-inline\">BasketService<\/code> so that our service doesn&#8217;t need to know how the articles used are provided. They could come from a repository that fetches the data from a local JSON file, or retrieved from a local database, or even fetched from a network service.<\/p>\n<p>This allows us to use our <code class=\"code-inline\">BasketService<\/code> in different contexts and if we want to write tests for this class, we can inject mocked versions of our repository, to make our tests more predictable by using always the same test data.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/d83d594d513fdf612c161f2fc30a31c9.js\"><\/script><\/p>\n<p>Ok perfect, we were able to inject a mocked version of our <i>repository<\/i> with one dummy article to check if our service works as expected and adds our test article to the provided <i>basket<\/i>.<\/p>\n<h3>Property-based Dependency Injection<\/h3>\n<p>Ok, initializer-based dependency injection seems to be a good solution, but there are cases where it isn&#8217;t the right fit, for example in ViewControllers where it&#8217;s not so easy to work with initializers, especially if you use XIB or storyboard files.<\/p>\n<p><img class=\"alignnone size-full wp-image-521\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Bildschirmfoto-2018-12-07-um-10.31.31-10.png\" alt=\"\" width=\"1504\" height=\"300\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Bildschirmfoto-2018-12-07-um-10.31.31-10.png 1504w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Bildschirmfoto-2018-12-07-um-10.31.31-10-300x60.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Bildschirmfoto-2018-12-07-um-10.31.31-10-768x153.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Bildschirmfoto-2018-12-07-um-10.31.31-10-1024x204.png 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Bildschirmfoto-2018-12-07-um-10.31.31-10-550x110.png 550w\" sizes=\"(max-width: 1504px) 100vw, 1504px\" \/><\/p>\n<p>We all know this error message and the annoying <i>fix-it<\/i> solution provided by Xcode. But how can use Dependency Injection without overriding all the default initializers?<\/p>\n<p>That&#8217;s where <strong>property-based Dependency Injection<\/strong> comes into play. We <i>assign properties of the module after initializing it<\/i>.<\/p>\n<p>Let&#8217;s see this in action for our <code class=\"code-inline\">BasketViewController<\/code> that has our <code class=\"code-inline\">BasketService<\/code> class as a dependency.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/be8824374fb14d40095aeaee9b347e26.js\"><\/script><\/p>\n<p>We were forced to use a force unwrapped optional here, to make sure that the app crashes when the <code class=\"code-inline\">basketService<\/code> property was not properly injected before.<\/p>\n<p>If we want to get rid of the force unwrapped optional and provide default implementations we can declare the default assignee when declaring the properties.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/ce183e42cfe09cbad3e0020f6fd2932c.js\"><\/script><\/p>\n<p><i>Property-based\u00a0Dependency Injection<\/i>\u00a0has some downsides as well: First, our classes <i>need to handle the dynamic change of dependencies<\/i> and second, we need to <i>make the properties accessible and mutable from outside<\/i> and can&#8217;t define them as private anymore.<\/p>\n<h2>Factory Classes<\/h2>\n<p>Both solutions we have seen so far moved the responsibility of injecting the dependencies to the class creating the new module. This might be better than hardcoding dependencies into the modules, but <i>moving this responsibility to own types<\/i> is, in general, a better solution. It also makes sure, that we don&#8217;t need to have duplicate code for initializing modules across our codebase.<\/p>\n<p>These types handle the creation of classes and set all their dependencies. These so-called <strong><i>Factory<\/i><\/strong> classes additionally solve the problem of passing dependencies around. We had to do this with all other solutions before and it can get messy if your classes have a large number of dependencies or you have multiple levels of dependencies like our example above: BasketViewController &#8211;&gt; BasketService &#8211;&gt; Repository.<\/p>\n<p>Let&#8217;s take a look at a <i>Factory<\/i> for our Basket related classes.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/e9dc65115c351f9c0cc9301489336423.js\"><\/script><\/p>\n<p>By making the factory a <i>protocol<\/i>, we can have multiple implementations of it, for example a special factory for the test cases.<\/p>\n<p>Factory-based Dependency Injection works hand in hand with the solutions we have seen before and allows us to <i>mix different techniques<\/i>, but <i>keep a clear interface on how we create instances<\/i> of our classes.<\/p>\n<p>There is no better way to explain it, than by showing you an example:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/2503c781311eb58f8bd51d94c25b2e11.js\"><\/script><\/p>\n<p>Our <code class=\"code-inline\">DefaultBasketFactory<\/code> implements the protocol defined above and has public factory methods and private ones. A factory method can and should <i>use the other factory methods<\/i> in the class <i>for creating lower dependencies<\/i>.<\/p>\n<p>The example above shows perfectly how we combine the techniques of initializer-based and property-based Dependency Injection, but with the advantage of having an elegant and simple interface to create the dependencies.<\/p>\n<p>To initialize an instance of our <code class=\"code-inline\">BasketViewController<\/code> we only need to write this single and self-explaining line of code.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/834cbbeb80fe6611fcca719dcd3857ee.js\"><\/script><\/p>\n<h2>The Service Locator Pattern<\/h2>\n<p>Based on the solutions we have seen so far we are going to build a more generalized and flexible solution using the so-called <b>Service Locator<\/b> design pattern. Let&#8217;s start by defining the involved entities for our <i>Service Locator<\/i>:<\/p>\n<ul>\n<li><i>Container<\/i>: Stores the configuration on how to create instances of the registered types<\/li>\n<li><i>Resolver<\/i>: Resolves the actual implementation for a type, by creating an instance of a class, using the configuration of the <i>Container<\/i><\/li>\n<li><i>ServiceFactory<\/i>: A generic factory solution for creating instances of the generic type<\/li>\n<\/ul>\n<h3>Resolver<\/h3>\n<p>We start by defining a <code class=\"code-inline\">Resolver<\/code> protocol for the <em>Service Locator Pattern<\/em>. It&#8217;s a simple protocol with only one method for creating an instance conforming to the passed <i>ServiceType<\/i> type.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/b57c7f2689f49c335b82986e1df02397.js\"><\/script><\/p>\n<p>We can use objects conforming to that protocol in the following way:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/2423a285098f68ad3d0319b544084ff5.js\"><\/script><\/p>\n<h3>ServiceFactory<\/h3>\n<p>Next up we define our <code class=\"code-inline\">ServiceFactory<\/code> protocol with an associated type <i>ServiceType<\/i>. Our factory will create instances of types conforming to the <i>ServiceType\u00a0<\/i>protocol.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/170b44dec357df6c1363e3522a57447c.js\"><\/script><\/p>\n<p>This looks quite similar to the <i>Resolver<\/i> protocol we have seen before, but it introduces the additional <i>associated type<\/i> for adding more type safety to our implementation.<\/p>\n<p>Let&#8217;s define our first type conforming to this protocol called <code class=\"code-inline\">BasicServiceFactory<\/code>. This factory class uses the injected <i>factory<\/i> method to produce instances of classes\/structs of type <i>ServiceType<\/i>. By passing the <i>Resolver<\/i> as an argument to the <i>factory\u00a0<\/i>closure, we can use it to create lower level dependencies needed for creating instances of that type.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/51479122a98dc49318e1d81f1cef0596.js\"><\/script><\/p>\n<p>This <code class=\"code-inline\">BasicServiceFactory<\/code> struct could be used as a standalone and more generic solution than the <i>Factory<\/i> classes we have seen above. But we are not done yet. The last thing we need to implement the <em>Service Locator Pattern in Swift<\/em> is the <em>Container<\/em>.<\/p>\n<h3>Container<\/h3>\n<h4>Before we start writing our <code class=\"code-inline\">Container<\/code> class. Let&#8217;s repeat shortly what it should be doing for us:<\/h4>\n<ol start=\"1\">\n<li>It should allow us to register new factories for a certain type<\/li>\n<li>It should store <i>ServiceFactory<\/i> instances<\/li>\n<li>It should be used as a <i>Resolver<\/i> for any stored type<\/li>\n<\/ol>\n<p>To be able to store instances of <b>ServiceFactory<\/b> classes in a type-safe manner we would need to be able to have <i>variadic generics<\/i> implemented in Swift. This is not yet possible in Swift, but is part of the <a href=\"https:\/\/github.com\/apple\/swift\/blob\/master\/docs\/GenericsManifesto.md#variadic-generics\">generic manifesto<\/a> and will be added to Swift in a future version. In the meantime, we need to eliminate the generic type using a <i>type erased\u00a0<\/i>version called <code class=\"code-inline\">AnyServiceFactory<\/code>.<\/p>\n<p>For sake of simplicity we won&#8217;t show you the implementation of it, but if you&#8217;re interested in it take a look at the full playground linked below.<\/p>\n<p>Now we are going to create our <code class=\"code-inline\">Container<\/code> struct:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/fc2a394be12e94a997795a342d5e44e9.js\"><\/script><\/p>\n<p>We define our Container as a <i>struct<\/i> acting as a <i>resolver<\/i> and storing the <i>type erased\u00a0<\/i>factories. Next up we will add the code for the registration of new types with their factories.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/1481db5f0f82bfc4757a472ac5955089.js\"><\/script><\/p>\n<p>The first method allows us to register a certain instance of a class for our <i>ServiceType<\/i>. This is especially useful for injecting singleton(like) classes such as <code class=\"code-inline\">UserDefaults<\/code>\u00a0and <code class=\"code-inline\">Bundle<\/code>.<\/p>\n<p>The second and even more important method creates a new <i>factory<\/i> and returns a new immutable <i>container<\/i> including that new factory.<\/p>\n<p>The last missing piece is to actually conform to our <code class=\"code-inline\">Resolver<\/code> protocol and resolve instances using our stored factories.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/2c484522a9a7afe570ff54364665df51.js\"><\/script><\/p>\n<p>We are using a <i>guard statement<\/i> to check if it contains a factory that is able to resolve our dependency and throw a <i>fatal error<\/i> otherwise. Finally, we return the instance created by the first factory supporting this type.<\/p>\n<h3>Usage of Service Locators<\/h3>\n<p>Let&#8217;s get to our basket example from before and define a <i>container<\/i> for all the basket related classes:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/55a17ce81613bc3799694b580cc05e6c.js\"><\/script><\/p>\n<p>This shows already the power and elegance of our super simple solution. We can store all factories using chained register methods while using and mixing all the different\u00a0Dependency Injection\u00a0techniques we have seen before.<\/p>\n<p>And last but not least our interface for creating instances stays simple and elegant.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/LizzieStudeneer\/ba5aa80df8023b2cd7bac1abeb69ff36.js\"><\/script><\/p>\n<h2>Conclusion<\/h2>\n<p>We have seen different techniques to use <em>Dependency Injection<\/em>\u00a0in Swift. More importantly, we have seen that you do not need to decide on one single solution. They can be mixed to get the combined strengths of every technique. To bring everything to the next level we introduced <i>Factory<\/i> classes and the more generic solution of the\u00a0<i>ServiceLocator pattern in Swift. This<\/i>\u00a0could be improved by adding additional support for multiple arguments or by adding more type safety when Swift introduces <i>variadic generics<\/i>.<\/p>\n<p>For the sake of simplicity, we ignored things like scoping, dynamic dependencies and circular dependencies. All of these problems are solvable but out of scope for this article. You can see the full playground containing everything we have shown you today in action <a href=\"https:\/\/github.com\/quickbirdstudios\/DependencyInjectionPlayground\">here<\/a>.<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Swift-addict.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/swift-dependency-injection-service-locators\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Swift-addict.jpg\" data-pin-description=\"Dependency Injection Strategies in Swift\"\/>","protected":false},"excerpt":{"rendered":"<p>Today we will take a deep look at Dependency Injection in Swift, one of the most important techniques in software development and a heavily used concept in many programming languages. Specifically, we&#8217;ll explore which strategies\/patterns we can use, including the Service Locator pattern in Swift. The intent behind Dependency Injection is to decouple objects by [&hellip;]<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Swift-addict.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/swift-dependency-injection-service-locators\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Swift-addict.jpg\" data-pin-description=\"Dependency Injection Strategies in Swift\"\/>","protected":false},"author":4,"featured_media":549,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/513"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=513"}],"version-history":[{"count":26,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/513\/revisions"}],"predecessor-version":[{"id":830,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/513\/revisions\/830"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/549"}],"wp:attachment":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]},"_embedded":{"author":[{"id":4,"name":"Stefan Kofler","url":"","description":"","link":"https:\/\/quickbirdstudios.com\/blog\/author\/stefan\/","slug":"stefan","avatar_urls":{"24":"https:\/\/secure.gravatar.com\/avatar\/d661ab6b5aac096b40cc2fa83c39cd8f?s=24&d=mm&r=g","48":"https:\/\/secure.gravatar.com\/avatar\/d661ab6b5aac096b40cc2fa83c39cd8f?s=48&d=mm&r=g","96":"https:\/\/secure.gravatar.com\/avatar\/d661ab6b5aac096b40cc2fa83c39cd8f?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users"}]}}],"wp:featuredmedia":[{"id":549,"date":"2019-01-10T12:52:46","slug":"swift-addict","type":"attachment","link":"https:\/\/quickbirdstudios.com\/blog\/swift-dependency-injection-service-locators\/swift-addict\/","title":{"rendered":"Swift addict"},"author":2,"caption":{"rendered":"<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Swift-addict.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/swift-dependency-injection-service-locators\/swift-addict\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Swift-addict.jpg\" data-pin-description=\"Swift addict\"\/>"},"alt_text":"","media_type":"image","mime_type":"image\/jpeg","media_details":{"width":2000,"height":1012,"file":"2019\/01\/Swift-addict.jpg","sizes":{"thumbnail":{"file":"Swift-addict-150x150.jpg","width":150,"height":150,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Swift-addict-150x150.jpg"},"medium":{"file":"Swift-addict-300x152.jpg","width":300,"height":152,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Swift-addict-300x152.jpg"},"medium_large":{"file":"Swift-addict-768x389.jpg","width":768,"height":389,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Swift-addict-768x389.jpg"},"large":{"file":"Swift-addict-1024x518.jpg","width":1024,"height":518,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Swift-addict-1024x518.jpg"},"spatial-index":{"file":"Swift-addict-840x560.jpg","width":840,"height":560,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Swift-addict-840x560.jpg"},"spatial-masonry":{"file":"Swift-addict-550x278.jpg","width":550,"height":278,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Swift-addict-550x278.jpg"},"full":{"file":"Swift-addict.jpg","width":2000,"height":1012,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Swift-addict.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2019\/01\/Swift-addict.jpg","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/549"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/attachment"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=549"}]}}],"wp:term":[[{"id":1,"link":"https:\/\/quickbirdstudios.com\/blog\/category\/uncategorized\/","name":"Uncategorized","slug":"uncategorized","taxonomy":"category","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories\/1"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/taxonomies\/category"}],"wp:post_type":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts?categories=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}],[]]}},{"id":456,"date":"2018-12-18T10:20:26","date_gmt":"2018-12-18T10:20:26","guid":{"rendered":"https:\/\/quickbirdstudios.com\/blog\/?p=456"},"modified":"2018-12-20T07:40:11","modified_gmt":"2018-12-20T07:40:11","slug":"development-approaches-for-porting-code-bases","status":"publish","type":"post","link":"https:\/\/quickbirdstudios.com\/blog\/development-approaches-for-porting-code-bases\/","title":{"rendered":"Development approaches for porting code bases to a new platform"},"content":{"rendered":"<p>You and your team developed a sophisticated App for iOS, but now you want the same on e.g. on Android and the Web. The problem: the project is so big, where should you even start with the implementation? First, implement all the model classes or rather start with the User Interface classes? Who gets assigned to which part of the code?<\/p>\n<p>It requires a lot of brainstorming and planning to come up with a good plan to execute this kind of project. Additionally, this task gets more complicated with the increasing size of the project.<\/p>\n<p>In this article, we present approaches to implementing software projects for a new platform when the code base on a different platform is already (partially) finished. We won&#8217;t get into the specifics of how to adapt the design or API interfaces to the new platform. Instead, we present a concept of how to approach the porting of the code in a shared team effort.<\/p>\n<h2><strong>Development Approaches: Horizontal vs. Vertical<\/strong><\/h2>\n<p>Before getting into more details, let&#8217;s discuss what a project typically consists of. A project is normally a combination of the following layer\/modules.<\/p>\n<p><u>Frontend\/Presentation<\/u>: presentation related problems e.g. user interface components and navigation\/routing between them<\/p>\n<p><u>Business Logic\/Core<\/u>: core functionalities of the project e.g. user management, product management etc.<\/p>\n<p><u>Backend &amp; Storage<\/u>: server\/local-storage related functionalities e.g. APIs, Databases etc.<\/p>\n<p>In the scope of this article, we separate between three different approaches to implementing software projects: the Vertical Development Approach, the Horizontal Development Approach, and the Mixed Approach (Vertical + Horizontal):<\/p>\n<figure id=\"attachment_465\" aria-describedby=\"caption-attachment-465\" style=\"width: 2361px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-465 size-full\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development@3x.png\" alt=\"\" width=\"2361\" height=\"734\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development@3x.png 2361w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development@3x-300x93.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development@3x-768x239.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development@3x-1024x318.png 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development@3x-550x171.png 550w\" sizes=\"(max-width: 2361px) 100vw, 2361px\" \/><figcaption id=\"caption-attachment-465\" class=\"wp-caption-text\">Approaches to implementing software projects<\/figcaption><\/figure>\n<p>In the following, we introduce the concepts of these approaches and their advantages and disadvantages.<\/p>\n<h3>Horizontal Development Approach<\/h3>\n<p>In this approach, the project is divided into layers (as listed above) which are implemented in parallel. Each layer is assigned to a specialized team. Development of all the layers starts at the same time.<\/p>\n<p><img class=\"aligncenter wp-image-468\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development111.png\" alt=\"\" width=\"400\" height=\"459\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development111.png 639w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development111-261x300.png 261w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development111-550x632.png 550w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/p>\n<p><strong>Advantages<\/strong>:<\/p>\n<ul>\n<li>Tasks are assigned according to the strengths of the teams which means more efficiency and high quality of work. For example, a core developer does not need to care about the UI and vice versa.<\/li>\n<li>Team members (e.g. presentation layer team) share the same strengths. Communication becomes much easier.<\/li>\n<\/ul>\n<p><strong>Disadvantages<\/strong><\/p>\n<ul>\n<li>There is no presentable version of the project until it is fully complete.<\/li>\n<li>User tests or integration tests are usually only possible when all layers and therefore all features are implemented. Critical bugs might be discovered too late.<\/li>\n<li>There is a high probability of duplication of tasks which results in a waste of time. For example, the UI team would need the models for displaying data in the UI etc. but the Business Logic team didn&#8217;t implement them\u00a0yet<\/li>\n<\/ul>\n<h3>Vertical Development Approach<\/h3>\n<p>In this approach, the project is divided into features (a small unit of work). Those features are developed one by one. Normally, a feature is developed and tested before moving onto the next one.<\/p>\n<p><img class=\"aligncenter wp-image-469\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development222.png\" alt=\"\" width=\"400\" height=\"448\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development222.png 655w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development222-268x300.png 268w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development222-550x616.png 550w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/p>\n<p><strong>Advantages<\/strong>:<\/p>\n<ul>\n<li>The team can focus on the features most important to the customer.<\/li>\n<li>Each feature can be tested as soon as it&#8217;s finished. Integration tests and user tests, therefore, happen frequently throughout the project. That makes the outcome more predictable.<\/li>\n<li>Builds can be regularly sent to the customer with every newly implemented feature<\/li>\n<li>An MVP (Minimum Viable Product) can be developed quickly by implementing only the necessary features. For example, an eCommerce application with the limited ability to search and display products.<\/li>\n<li>A team member gets to wear many hats and has an opportunity to gain diverse skills.<\/li>\n<\/ul>\n<p><strong>Disadvantages<\/strong>:<\/p>\n<ul>\n<li>Features can rarely be implemented in isolation. They usually require other features to be implemented first. We are therefore forced to mock a lot of code.<\/li>\n<li>A team member has to wear many hats, this can also be a disadvantage: team members normally require more time to complete a task if they are not a specialist in that field.<\/li>\n<\/ul>\n<h3>Mixed (Vertical-Horizontal) Approach<\/h3>\n<p>The Mixed (Vertical-Horizontal) Approach combines both the Vertical and the Horizontal Development Approach. The idea is to divide the project into features (vertical). Then each feature is divided into layers (horizontal) and assigned according to expertise.<\/p>\n<p><img class=\"aligncenter wp-image-470\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development333.png\" alt=\"\" width=\"400\" height=\"452\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development333.png 649w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development333-265x300.png 265w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development333-550x622.png 550w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/p>\n<p><strong>Advantages<\/strong>:<\/p>\n<ul>\n<li>It combines the advantages of the Vertical Development Approach and the Horizontal Development Approach.<\/li>\n<\/ul>\n<p><strong>Disadvantages<\/strong>:<\/p>\n<ul>\n<li>It&#8217;s only efficient if the size of the project and therefore the amount of developer justifies such a fine-grained separation.<\/li>\n<li>The more structural rules you introduce, the harder it will be for the developers to get the job done in a straight-forward manner<\/li>\n<\/ul>\n<h2>In Practice<\/h2>\n<p>We will be using the example of an eCommerce app to explain how to approach porting that project to another platform. Our eCommerce application consists of the following main components:<\/p>\n<p><img class=\"aligncenter size-full wp-image-463\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/PHP-Example.png\" alt=\"\" width=\"954\" height=\"263\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/PHP-Example.png 954w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/PHP-Example-300x83.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/PHP-Example-768x212.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/PHP-Example-550x152.png 550w\" sizes=\"(max-width: 954px) 100vw, 954px\" \/><\/p>\n<p>All of the above modules are higher level abstractions. That means, every model includes all layers (such as presentation, core and web services). Since the backend\/data persistence logic is implemented independently on a remote server, we omit it in this example.<\/p>\n<h3>Horizontal Development Approach in practice<\/h3>\n<p>We now divide the whole eCommerce application into Presentation and Core layers assigning each of the layers to a specialized team. Both of these teams now start in parallel, independent of each other.<\/p>\n<p>So which module to start with first (User, Product, Purchase or Delivery)? One idea is to start with the module having the least amount of dependencies. In our example, User and Product are the modules with no dependencies on other modules. So we&#8217;ll start with these modules.<\/p>\n<p>Inside the module, we differentiate between a <strong>bottom-up<\/strong> and a <strong>top-down<\/strong> class implementation approach. Bottom-up means starting by\u00a0first implementing the classes which have the least amount of dependencies to other classes. For example, Util-classes usually don&#8217;t depend on any other project class. That makes it easy to implement them without mocking dependencies or jumping to other files. Model classes are also quite independent of other packages and classes.<\/p>\n<p>Top-down is the opposite, you start e.g. with the User Interface classes which depend on many other classes. It forces you to mock out a lot of dependencies and your code will often not compile immediately. On the other hand, this approach feels more natural to a lot of people. It automatically forces you to implement every single class of the project.<\/p>\n<p>We personally often use a bottom-up approach. The Core team starts with the Model and Util classes. This allows the Presentation Layer team to make use of these classes as soon as they are available. The Presentation Layer team starts with simple Views which can then be used to form more complex UI components.<\/p>\n<p>The Horizontal Development approach is suitable when:<\/p>\n<ul>\n<li>there are specialist teams<\/li>\n<li>the customer does not want regular builds and just cares about the end product.<\/li>\n<\/ul>\n<h3>Vertical Development Approach in practice<\/h3>\n<p>In this approach, we first divide the whole application in a set of manageable features:<\/p>\n<ul>\n<li>Products:\n<ul>\n<li>P1: Display products<\/li>\n<li>P2: Sort products<\/li>\n<li>P3: Filter products<\/li>\n<\/ul>\n<\/li>\n<li>User\n<ul>\n<li>U1: Login<\/li>\n<li>U2: Sign up<\/li>\n<\/ul>\n<\/li>\n<li>Purchase\n<ul>\n<li>PR1: Shopping Cart<\/li>\n<li>PR2:\u00a0Purchase process<\/li>\n<\/ul>\n<\/li>\n<li>Delivery\n<ul>\n<li>D1: Delivery Process<\/li>\n<\/ul>\n<\/li>\n<li>Refund\n<ul>\n<li>R1: Refund Process<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Together with the customer, we assign priorities to these features. Let&#8217;s say the client wants to display some products first. We now go ahead and start implementing the model classes for this feature, following a bottom-up class implementation approach.<\/p>\n<p>Since the features are chosen to be small units of work, optimally only one person works on one feature at a time. In this way, the team can develop multiple features at once without a big communication overhead.<\/p>\n<p>The Vertical Development approach is suitable when:<\/p>\n<ul>\n<li>there are smaller teams<\/li>\n<li>the customer is expecting regular builds<\/li>\n<li>your team does Agile Development and therefore divides its work into manageable User Stories<\/li>\n<\/ul>\n<h3>Mixed (Vertical-Horizontal) Development<\/h3>\n<p>Let&#8217;s say, we want to implement the feature of displaying products. We first follow a Vertical Development approach to divide the project into features with a respective priority (see above). We then divide the selected feature into layers and assign each layer to a specialized team (member).<\/p>\n<p>The Presentation Layer team now implements all of the Views for displaying products while the Core team writes the logic for filtering and sorting these products.<\/p>\n<p>We&#8217;d recommend implementing the classes shared between layers first as it will reduce duplication. Model classes are a good example as they are needed by both the UI and the Core team.<\/p>\n<p>The Mixed Development approach is suitable when:<\/p>\n<ul>\n<li>there are teams where each team member has a different domain (frontend, backend etc.) of expertise<\/li>\n<li>the customer is expecting regular builds<\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>Each of these approaches has its Pros &amp; Cons. We found this simplification of dividing approaches into horizontal and vertical useful for planning some of our projects. Yet, of course, this is only one way of looking at the problem.\u00a0You need to decide what fits your team size and project requirements. Finally, at a certain point, it&#8217;s time to stop planning, get going and learn the important lessons for your team on the way. You cannot plan for every single problem in ahead.<\/p>\n<p>&nbsp;<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development@3x.png\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/development-approaches-for-porting-code-bases\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development@3x.png\" data-pin-description=\"Development approaches for porting code bases to a new platform\"\/>","protected":false},"excerpt":{"rendered":"<p>You and your team developed a sophisticated App for iOS, but now you want the same on e.g. on Android and the Web. The problem: the project is so big, where should you even start with the implementation? First, implement all the model classes or rather start with the User Interface classes? Who gets assigned [&hellip;]<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development@3x.png\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/development-approaches-for-porting-code-bases\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development@3x.png\" data-pin-description=\"Development approaches for porting code bases to a new platform\"\/>","protected":false},"author":8,"featured_media":465,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/456"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=456"}],"version-history":[{"count":20,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/456\/revisions"}],"predecessor-version":[{"id":486,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/456\/revisions\/486"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/465"}],"wp:attachment":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]},"_embedded":{"author":[{"id":8,"name":"Ghulam Nasir","url":"","description":"","link":"https:\/\/quickbirdstudios.com\/blog\/author\/nasir\/","slug":"nasir","avatar_urls":{"24":"https:\/\/secure.gravatar.com\/avatar\/1017c7011317fab922986196bc146f61?s=24&d=mm&r=g","48":"https:\/\/secure.gravatar.com\/avatar\/1017c7011317fab922986196bc146f61?s=48&d=mm&r=g","96":"https:\/\/secure.gravatar.com\/avatar\/1017c7011317fab922986196bc146f61?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users"}]}}],"wp:featuredmedia":[{"id":465,"date":"2018-12-19T07:04:27","slug":"development3x","type":"attachment","link":"https:\/\/quickbirdstudios.com\/blog\/development-approaches-for-porting-code-bases\/development3x\/","title":{"rendered":"Development@3x"},"author":2,"caption":{"rendered":"<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development@3x.png\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/development-approaches-for-porting-code-bases\/development3x\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development@3x.png\" data-pin-description=\"Development@3x\"\/>"},"alt_text":"","media_type":"image","mime_type":"image\/png","media_details":{"width":2361,"height":734,"file":"2018\/12\/Development@3x.png","sizes":{"thumbnail":{"file":"Development@3x-150x150.png","width":150,"height":150,"mime_type":"image\/png","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development@3x-150x150.png"},"medium":{"file":"Development@3x-300x93.png","width":300,"height":93,"mime_type":"image\/png","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development@3x-300x93.png"},"medium_large":{"file":"Development@3x-768x239.png","width":768,"height":239,"mime_type":"image\/png","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development@3x-768x239.png"},"large":{"file":"Development@3x-1024x318.png","width":1024,"height":318,"mime_type":"image\/png","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development@3x-1024x318.png"},"spatial-index":{"file":"Development@3x-840x560.png","width":840,"height":560,"mime_type":"image\/png","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development@3x-840x560.png"},"spatial-masonry":{"file":"Development@3x-550x171.png","width":550,"height":171,"mime_type":"image\/png","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development@3x-550x171.png"},"full":{"file":"Development@3x.png","width":2361,"height":734,"mime_type":"image\/png","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development@3x.png"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/12\/Development@3x.png","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/465"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/attachment"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=465"}]}}],"wp:term":[[{"id":1,"link":"https:\/\/quickbirdstudios.com\/blog\/category\/uncategorized\/","name":"Uncategorized","slug":"uncategorized","taxonomy":"category","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories\/1"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/taxonomies\/category"}],"wp:post_type":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts?categories=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}],[]]}},{"id":417,"date":"2018-10-30T10:20:40","date_gmt":"2018-10-30T10:20:40","guid":{"rendered":"https:\/\/quickbirdstudios.com\/blog\/?p=417"},"modified":"2019-09-20T11:37:07","modified_gmt":"2019-09-20T11:37:07","slug":"the-best-blacksmith-developer","status":"publish","type":"post","link":"https:\/\/quickbirdstudios.com\/blog\/the-best-blacksmith-developer\/","title":{"rendered":"What makes a great developer? A story of an extraordinary blacksmith"},"content":{"rendered":"<p>It\u2019s the year 1602 and Gordon is the best blacksmith in the country. Lords from everywhere are making the journey to his smithy to order one of his fine swords.<\/p>\n<p>Today, we are taking a look why Gordon is such an extraordinary blacksmith, and more importantly what you can learn from Gordon to become a better developer. There\u2019s an old saying that a great programmer can be <a href=\"https:\/\/www.joelonsoftware.com\/2005\/07\/25\/hitting-the-high-notes\/\">10 times as good as a mediocre one.<\/a><\/p>\n<p>Gordon was not a programmer. So we are not focusing on the details of coding in this article but on the absolutely fundamental attitudes of a great craftsman. They are still roughly the same, even 400 years later.<\/p>\n<figure id=\"attachment_421\" aria-describedby=\"caption-attachment-421\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-421\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-1-v1_2.jpg\" alt=\"\" width=\"800\" height=\"380\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-1-v1_2.jpg 2000w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-1-v1_2-300x143.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-1-v1_2-768x365.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-1-v1_2-1024x486.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-1-v1_2-550x261.jpg 550w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-421\" class=\"wp-caption-text\">Blacksmith vs Software Developer<\/figcaption><\/figure>\n<h2 style=\"text-align: center;\">So what makes a great blacksmith, and therefore what makes a great developer?<\/h2>\n<h3>(S)he loves what (s)he does<\/h3>\n<p>You can hardly beat someone who truly loves what he does. Edmund, the neighbor-blacksmith of Gordon was 100% dedicated to becoming the best, but he lacked fun and joy at his craft. Therefore, he wasn\u2019t as creative, curious and motivated as Gordon in the long term. Edmund&#8217;s swords were ok, but they didn\u2019t put that bright smile on the face of his customer the way Gordon\u2019s swords did.\u00a0Loving what you do fuels three important attitudes for a good craftsman: curiosity, creativity, and long-term motivation.<\/p>\n<p><strong>Curiosity<br \/>\n<\/strong>If a craftsman does not love what he does, he is usually working for money or prestige. Decisions that don\u2019t increase money or prestige in the short term are therefore often neglected.\u00a0A person solely driven by money\/prestige would seldom dig into a totally new area where he lacks knowledge. Being novel means less money and prestige in the beginning after all.<\/p>\n<p>People who love their craft, on the other hand, cannot wait to explore new areas. They will try new things, take a chance and fail, and play around with whatever else is out there. That keeps them on top of the industry in the long term.<\/p>\n<p>Great blacksmiths and great developers are curious how stuff works and always ask &#8220;Why?\u201d. Based on the resulting fundamental understanding of their craft they can push the industry forward and create new innovations.<\/p>\n<p><strong>Creativity<br \/>\n<\/strong>At any creative craft, if you don\u2019t enjoy what you do, you will never be as playful as someone who does. The best ideas come when you walk home from work and your brain just cannot stop thinking about the exciting problems you are working on.<\/p>\n<figure id=\"attachment_423\" aria-describedby=\"caption-attachment-423\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-423\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-2-Walk-home.jpg\" alt=\"\" width=\"800\" height=\"400\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-2-Walk-home.jpg 2000w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-2-Walk-home-300x150.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-2-Walk-home-768x384.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-2-Walk-home-1024x512.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-2-Walk-home-550x275.jpg 550w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-423\" class=\"wp-caption-text\">Gordon and Edmund: Doing what you love VS working solely for money\/prestige<\/figcaption><\/figure>\n<p><strong>Long-term motivation<br \/>\n<\/strong>A passionate craftsman\u2019s motivation is not a boss screaming at him; it\u2019s neither money nor prestige. His motivation comes naturally the process of building and creating new things. That keeps him motivated even after several years of up and downs.<\/p>\n<h3>(S)he is humble<\/h3>\n<p>Gordon was a humble guy. He was convinced that he was far from being the best (which ironically eventually made him the best). Therefore, he never stopped learning and exploring. Walking to fellow blacksmiths to ask them for some of their best tricks was part of his weekly routine. Gordon encouraged critics from fellow blacksmiths to improve his craft.<\/p>\n<p>If you become arrogant, you stop learning. You believe you know everything and therefore fail to keep up with trends and new insights in your area. So being humble is not just a nice attitude for making other people like you. It is indeed a critical business attitude if you want to compete among the best.<\/p>\n<h3>(S)he is courageous and honest<\/h3>\n<p>Often high lords or kings came to Gordon to order swords with a hard deadline. The next war was around the corner and they needed 1000 swords by the end of the year. One of Gordon\u2019s most appreciated qualities was that he always pointed out clearly and transparently what he thought. If 1000 swords by the end of the year just weren&#8217;t possible, he stood up to the king and said:<\/p>\n<p>\u201cYour Grace, I apologize but we can only create 500 swords within that time for you!\u201d<\/p>\n<p>This would surely upset some of the high lords. But you know what upsets high lords even more? Getting ready for war and hearing the news that 500 swords are still missing. People got killed for that kind of stuff.<\/p>\n<figure id=\"attachment_418\" aria-describedby=\"caption-attachment-418\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-418\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-3-war.jpg\" alt=\"\" width=\"800\" height=\"440\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-3-war.jpg 2000w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-3-war-300x165.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-3-war-768x422.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-3-war-1024x563.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-3-war-550x302.jpg 550w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-418\" class=\"wp-caption-text\">How your customer feels when you are not meeting your deadline<\/figcaption><\/figure>\n<p>Being honest includes admitting your own mistakes and taking responsibility for them. If you fuck up, tell the others and learn from the mistakes. If you are working in a great team like Gordon&#8217;s, they won\u2019t judge you but appreciate that honesty and courage.<\/p>\n<p>Being open and honest with your customers and teammates is critical for having long-term success. It takes courage. It sometimes hurts in the short-term. But it earns you trust and respect in the long term. This trust and respect leads to loyal customers, team members, and even friends.<\/p>\n<h3>(S)he is a team player<\/h3>\n<p>Gordon always knew that the success of the smithy was only the result of a team effort. Therefore, he took the time to teach new smiths what he knew. His hope was that they would one day become even better blacksmiths than he was now.<\/p>\n<p>New smiths valued that he explained stuff in simple terms and no gobbledygook. He was always open for questions and didn\u2019t judge people when they made mistakes.<br \/>\nEdmund, on the other hand, preferred to work alone. He hated to explain stuff to other people. They wouldn\u2019t get it anyways. That\u2019s why Edmund\u2019s smithy was only able to take small of orders of 10 swords or less.<\/p>\n<p>Gordon\u2019s team had no problem getting 100 swords done in the same timeframe. People loved to work with Gordon. That made it much easier to complete customer orders successfully.<\/p>\n<h3>(S)he is extremely customer-focused<\/h3>\n<p>Last but not least, Gordon was extremely customer-focused. He loved his craft, he loved to learn new things, but he also knew: All of that is for nothing if he cannot deliver great swords in the given amount of time by the lords. You can make the greatest sword. If your sword is finished after the war started, it\u2019s too late.<\/p>\n<p>Gordon was relentlessly focused on meeting the deadlines of his customers. On one hand, that involved communicating realistic time frames for orders in the first place. On the other hand, it means being ok with trade-offs from time to time. Perfectionism is a very common attitude around programmers and surely blacksmiths, too. In the end, you need to deliver. A super perfect but only 80% finished sword or software piece is useless.<\/p>\n<figure id=\"attachment_419\" aria-describedby=\"caption-attachment-419\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-419\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-4-warrior.jpg\" alt=\"\" width=\"800\" height=\"451\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-4-warrior.jpg 1660w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-4-warrior-300x169.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-4-warrior-768x433.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-4-warrior-1024x577.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-4-warrior-550x310.jpg 550w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-419\" class=\"wp-caption-text\">The danger of perfectionism &#8211; in the end, you need to deliver<\/figcaption><\/figure>\n<p>Another thing that Gordon always kept in mind was:<\/p>\n<blockquote><p>\u201cDon\u2019t reinvent the steel hammer\u201d<\/p><\/blockquote>\n<p>He didn\u2019t create his own custom hammers and tools to craft swords if he didn\u2019t need to. He just knew how to use them very well. His friend Humphrey was much better at crafting these tools. So Gordon happily went to his store to buy the tools from him. Gordon\u2019s customers didn\u2019t give a horse\u2019s crap about the hammers he used, they wanted to see great outcomes.<\/p>\n<p>There might be some lords who don\u2019t have time pressure. They just want a beautiful golden sword for their balcony, no matter when it\u2019s finished. That\u2019s fine, too. The point is not about generally hitting deadlines but about knowing the needs of your customer. Most customers have important deadlines though.<\/p>\n<p>Get in the head of your customer and keep his needs in mind while you\u2019re crafting. Some kings want a golden sword for their balcony, some warlords want 100 mediocre swords by the end of the week, some Gladiators want one single outstanding sword to beat their enemies in the arena.<\/p>\n<p>Know what your customer wants, listen to him, and do what it takes to deliver it.<\/p>\n<h3><strong>Conclusion<\/strong><\/h3>\n<p>The descriptions of what makes a great craftsman stem from our experience in working with all kinds of developers throughout our life. These points seemed to matter most when it comes to delivering great products. At QuickBird Studios, we make sure that everyone on our team embodies some form of Gordon and adheres to these values and principles. That impacts how we train people as well as how we make hiring decisions.<\/p>\n<p>Most articles for developers focus on delivering technical knowledge. That&#8217;s important as well, but in our experience, the mentioned values and principles are as important, if not more important than technical knowledge. A developer that loves what he does, who is humble, courageous, a team player and extremely customer-focused is a developer who makes great stuff happen.<\/p>\n<figure id=\"attachment_427\" aria-describedby=\"caption-attachment-427\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-427\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-1-v1_11.jpg\" alt=\"\" width=\"800\" height=\"336\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-1-v1_11.jpg 2000w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-1-v1_11-300x126.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-1-v1_11-768x323.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-1-v1_11-1024x430.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-1-v1_11-550x231.jpg 550w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-427\" class=\"wp-caption-text\">Crafting as a Blacksmith VS as a Software Developer<\/figcaption><\/figure>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-2-Walk-home.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/the-best-blacksmith-developer\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-2-Walk-home.jpg\" data-pin-description=\"What makes a great developer? A story of an extraordinary blacksmith\"\/>","protected":false},"excerpt":{"rendered":"<p>It\u2019s the year 1602 and Gordon is the best blacksmith in the country. Lords from everywhere are making the journey to his smithy to order one of his fine swords. Today, we are taking a look why Gordon is such an extraordinary blacksmith, and more importantly what you can learn from Gordon to become a [&hellip;]<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-2-Walk-home.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/the-best-blacksmith-developer\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-2-Walk-home.jpg\" data-pin-description=\"What makes a great developer? A story of an extraordinary blacksmith\"\/>","protected":false},"author":2,"featured_media":423,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/417"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=417"}],"version-history":[{"count":27,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/417\/revisions"}],"predecessor-version":[{"id":963,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/417\/revisions\/963"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/423"}],"wp:attachment":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]},"_embedded":{"author":[{"id":2,"name":"Malte Bucksch","url":"https:\/\/quickbirdstudios.com\/blog","description":"","link":"https:\/\/quickbirdstudios.com\/blog\/author\/quickbird\/","slug":"quickbird","avatar_urls":{"24":"https:\/\/secure.gravatar.com\/avatar\/dc8955c6a4bebbaffc0f99f21f757f13?s=24&d=mm&r=g","48":"https:\/\/secure.gravatar.com\/avatar\/dc8955c6a4bebbaffc0f99f21f757f13?s=48&d=mm&r=g","96":"https:\/\/secure.gravatar.com\/avatar\/dc8955c6a4bebbaffc0f99f21f757f13?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users"}]}}],"wp:featuredmedia":[{"id":423,"date":"2018-10-30T08:45:52","slug":"gordon-2-walk-home","type":"attachment","link":"https:\/\/quickbirdstudios.com\/blog\/the-best-blacksmith-developer\/gordon-2-walk-home\/","title":{"rendered":"Gordon 2 Walk home"},"author":2,"caption":{"rendered":"<p>Doing what you love vs working for money\/prestige<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-2-Walk-home.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/the-best-blacksmith-developer\/gordon-2-walk-home\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-2-Walk-home.jpg\" data-pin-description=\"Gordon 2 Walk home\"\/>"},"alt_text":"","media_type":"image","mime_type":"image\/jpeg","media_details":{"width":2000,"height":1000,"file":"2018\/10\/Gordon-2-Walk-home.jpg","sizes":{"thumbnail":{"file":"Gordon-2-Walk-home-150x150.jpg","width":150,"height":150,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-2-Walk-home-150x150.jpg"},"medium":{"file":"Gordon-2-Walk-home-300x150.jpg","width":300,"height":150,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-2-Walk-home-300x150.jpg"},"medium_large":{"file":"Gordon-2-Walk-home-768x384.jpg","width":768,"height":384,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-2-Walk-home-768x384.jpg"},"large":{"file":"Gordon-2-Walk-home-1024x512.jpg","width":1024,"height":512,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-2-Walk-home-1024x512.jpg"},"spatial-index":{"file":"Gordon-2-Walk-home-840x560.jpg","width":840,"height":560,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-2-Walk-home-840x560.jpg"},"spatial-masonry":{"file":"Gordon-2-Walk-home-550x275.jpg","width":550,"height":275,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-2-Walk-home-550x275.jpg"},"full":{"file":"Gordon-2-Walk-home.jpg","width":2000,"height":1000,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-2-Walk-home.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1","keywords":[]}},"source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/10\/Gordon-2-Walk-home.jpg","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/423"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/attachment"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=423"}]}}],"wp:term":[[{"id":1,"link":"https:\/\/quickbirdstudios.com\/blog\/category\/uncategorized\/","name":"Uncategorized","slug":"uncategorized","taxonomy":"category","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories\/1"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/taxonomies\/category"}],"wp:post_type":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts?categories=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}],[]]}},{"id":398,"date":"2018-10-01T13:04:22","date_gmt":"2018-10-01T13:04:22","guid":{"rendered":"https:\/\/quickbirdstudios.com\/blog\/?p=398"},"modified":"2018-10-08T14:05:14","modified_gmt":"2018-10-08T14:05:14","slug":"ios-navigation-library-based-on-the-coordinator-pattern","status":"publish","type":"post","link":"https:\/\/quickbirdstudios.com\/blog\/ios-navigation-library-based-on-the-coordinator-pattern\/","title":{"rendered":"Introducing an iOS navigation library based on the coordinator pattern"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p><img class=\"aligncenter wp-image-414\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/coordinator.jpg\" alt=\"\" width=\"800\" height=\"517\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/coordinator.jpg 2490w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/coordinator-300x194.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/coordinator-768x497.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/coordinator-1024x662.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/coordinator-550x356.jpg 550w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>We at QuickBird Studios are working on large-scale apps that grow over years and that&#8217;s why our team worked really hard to find suitable architectural patterns for our use cases. We described our use of MVVM and Functional Reactive Programming in some of our previous blog posts like <a href=\"https:\/\/quickbirdstudios.com\/blog\/app-architecture-our-functional-mvvm-approach-with-rx\/\">this one<\/a>.<\/p>\n<p>One topic we didn&#8217;t talk about yet is how we control the flow of scenes so that we can reuse them in different parts of our apps. Naturally, views tend to become overstuffed and get too many responsibilities. Today we show you a solution for separating the navigation logic from your exchangeable view components. Actually, it seems to be one of the more challenging problems to solve as an app programmer. Therefore, we developed a library called <a href=\"https:\/\/github.com\/quickbirdstudios\/RxCoordinator\">RxCoordinator<\/a> to solve this which we&#8217;ll describe in this article.\u00a0But before we talk about the solution let&#8217;s take a look at the problems we face if we do it the standard way.<\/p>\n<h3>What&#8217;s the actual problem?<\/h3>\n<p>Most app developers control the flow of screens in their apps in their view components (e.g. the ViewController). Even Apple and Googles sample code promotes this simple solution. This approach may be fine until you want to reuse one of those views in a different context.<\/p>\n<p>With this approach, the views need to have knowledge of the context in which they are used and that makes them less reusable and extremely large and hard to manage. Developers end up in situations where they write code like this:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/grafele\/169e0cdee0ddcd31eefa222b662560cd.js\"><\/script><\/p>\n<h3>The coordinator pattern<\/h3>\n<p>One easy to set up solution for this problem is to remove the responsibility of managing the flow of screens from the view components and move it to a separate higher-level layer. This pattern is named <strong>coordinator pattern<\/strong> and is described in some really nice articles by Soroush Khanlou <a href=\"http:\/\/khanlou.com\/2015\/01\/the-coordinator\/\">here<\/a> and <a href=\"http:\/\/khanlou.com\/2015\/10\/coordinators-redux\/\">here<\/a>.<\/p>\n<p>We started to use the coordinator pattern for our apps and it allowed us to create reusable views that are easier to test and allowed us to extract the ViewModel and View initialization to a separate layer. Especially the creation and configuration of those components can be really complex and putting this logic in other views (or view models) makes them really coupled.<\/p>\n<p>The coordinator can be called from different components. If you are using the MVC design architecture you will probably trigger the coordinator in your view components, if you are using MVVM you can call it either from the Views or the ViewModels. The guys from objc.io describe in their <a href=\"https:\/\/www.objc.io\/books\/app-architecture\/\">app architecture book<\/a> the approach of calling it from the view components. We at QuickBird Studios prefer to do it from the ViewModels.<\/p>\n<p>The coordinator pattern doesn&#8217;t necessarily mean you have to use the MVVM architecture for your apps, but it fits really nice with the idea of separating concerns of your components. The combination of MVVM and the coordinator pattern is well known under the name of <strong>MVVM-C<\/strong>.<\/p>\n<p><img class=\"size-full wp-image-403 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/mvvm-c.jpg\" alt=\"\" width=\"566\" height=\"334\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/mvvm-c.jpg 566w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/mvvm-c-300x177.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/mvvm-c-550x325.jpg 550w\" sizes=\"(max-width: 566px) 100vw, 566px\" \/><\/p>\n<h3>Taking coordinators to the next level<\/h3>\n<p>In the last chapter of Souroush&#8217;s article, he mentions that there is actually no need for a library for using the coordinator pattern:<\/p>\n<blockquote><p>Ultimately, coordinators are just an organizational pattern. There\u2019s no library you can use for coordinators because they\u2019re so simple.<\/p><\/blockquote>\n<p>He is principally right but after some time we saw that coordinators share a lot of code and they were mostly handling the routing of screens and that&#8217;s when we started to introduce a new terminology: <strong>router<\/strong> and <strong>coordinator<\/strong><\/p>\n<p>A <strong>router<\/strong> is an object that knows how to navigate to new screens under different circumstances and abstracts platform specific navigation code away. If we take iOS as an example the router would know how to push views to a Navigation Controller or how to present views modally.<\/p>\n<p>A <strong>coordinator<\/strong>\u00a0is much more than a router. It does route between screens, yes, but it is also responsible to decide which route to take after a specific action happened, it creates and configures Views and ViewModels and ultimately knows how to connect the routes to create a flow. Sometimes your Coordinator is also the perfect place to inject dependencies into your components.<\/p>\n<h3>Combining the idea of a Router and a Coordinator<\/h3>\n<p>After collecting all of our ideas about what our coordinator objects should do, we started to realize that there were a lot of things that could be abstracted away.<\/p>\n<p>Our coordinator shouldn&#8217;t need to repeat the routing code over and over again and that&#8217;s why our default coordinator implementation provides you with all the routing code needed. Additionally, we should be able to replace and inject different coordinators for different use cases. And last but not least we want to be able to use custom animations\/transitions to navigate to our screens.<\/p>\n<p>That was the moment when <a href=\"https:\/\/github.com\/quickbirdstudios\/RxCoordinator\">RxCoordinator<\/a> was born. We combined all of our ideas and wrote our own framework. We used and improved it over the following weeks and months and then released and open sourced it.<\/p>\n<p>To get started using it you just have to create an enum with all of the navigation paths for a particular flow :<br \/>\n<script src=\"https:\/\/gist.github.com\/grafele\/09ebb770ebe33ce8edf8d082dc17c5b2.js\"><\/script><\/p>\n<p>and to trigger the transition from your View or ViewModel:<br \/>\n<script src=\"https:\/\/gist.github.com\/grafele\/19f8aed09b5d8116e559022f79dc484a.js\"><\/script><\/p>\n<p>If you want to learn more about how to use RxCoordinator take a look at our <a href=\"https:\/\/github.com\/quickbirdstudios\/RxCoordinator\">Github repo<\/a>.<\/p>\n<p>Our framework abstracts the routing responsibility away and provides you with a frame for implementing your own coordinators. It&#8217;s especially useful for implementing MVVM-C, Model-View-ViewModel-Coordinator.<\/p>\n<p>RxCoordinator proposes you to trigger the routing from your ViewModels were your actual view logic should be. This removes redundant communication between View and ViewModel.<\/p>\n<p>To create a type-safe interface we use <strong>routes<\/strong>\u00a0to define the actual navigation paths from a view to another one. The <strong>coordinators<\/strong>\u00a0then are handling those routes and perform the actual navigation to this scene.<\/p>\n<p><strong>Transitions<\/strong>\u00a0are then describing the transition between two views and since we know that standard transitions are not the only transitions we use in our apps we added complete support for custom view transitions.<\/p>\n<p>Introducing all these new components may seem like an overhead, but you can actually mix transitions, routes and coordinators to create new combinations. That makes it super simple to add new routes and new transitions without changing your logic in your Views or ViewModels.<\/p>\n<p><img class=\"size-full wp-image-404 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/68747470733a2f2f717569636b6269726473747564696f732e636f6d2f66696c65732f78636f6f7264696e61746f722f6d76766d632e706e67.png\" alt=\"\" width=\"1774\" height=\"1313\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/68747470733a2f2f717569636b6269726473747564696f732e636f6d2f66696c65732f78636f6f7264696e61746f722f6d76766d632e706e67.png 1774w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/68747470733a2f2f717569636b6269726473747564696f732e636f6d2f66696c65732f78636f6f7264696e61746f722f6d76766d632e706e67-300x222.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/68747470733a2f2f717569636b6269726473747564696f732e636f6d2f66696c65732f78636f6f7264696e61746f722f6d76766d632e706e67-768x568.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/68747470733a2f2f717569636b6269726473747564696f732e636f6d2f66696c65732f78636f6f7264696e61746f722f6d76766d632e706e67-1024x758.png 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/68747470733a2f2f717569636b6269726473747564696f732e636f6d2f66696c65732f78636f6f7264696e61746f722f6d76766d632e706e67-550x407.png 550w\" sizes=\"(max-width: 1774px) 100vw, 1774px\" \/><\/p>\n<h3>Conclusion<\/h3>\n<p>Introducing the coordinator pattern helped as tremendously to remove even more responsibilities from the view components and helped us to write more reusable and better testable views. By adopting the pattern for our use cases and writing our own framework we came to a solution that fits really nice in our app architecture.<\/p>\n<p>We were amazed by the feedback we got for our framework and tried to include as many suggestions as possible. By introducing new types of components and settings type safety as our main goal we ended up with a redesigned framework we called XCoordinator. It&#8217;s still under heavy development but we will release it in the following weeks.<\/p>\n<p>Stay tuned! \ud83d\ude0e<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/coordinator.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/ios-navigation-library-based-on-the-coordinator-pattern\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/coordinator.jpg\" data-pin-description=\"Introducing an iOS navigation library based on the coordinator pattern\"\/>","protected":false},"excerpt":{"rendered":"<p>&nbsp; We at QuickBird Studios are working on large-scale apps that grow over years and that&#8217;s why our team worked really hard to find suitable architectural patterns for our use cases. We described our use of MVVM and Functional Reactive Programming in some of our previous blog posts like this one. One topic we didn&#8217;t [&hellip;]<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/coordinator.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/ios-navigation-library-based-on-the-coordinator-pattern\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/coordinator.jpg\" data-pin-description=\"Introducing an iOS navigation library based on the coordinator pattern\"\/>","protected":false},"author":4,"featured_media":414,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/398"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=398"}],"version-history":[{"count":9,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/398\/revisions"}],"predecessor-version":[{"id":415,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/398\/revisions\/415"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/414"}],"wp:attachment":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]},"_embedded":{"author":[{"id":4,"name":"Stefan Kofler","url":"","description":"","link":"https:\/\/quickbirdstudios.com\/blog\/author\/stefan\/","slug":"stefan","avatar_urls":{"24":"https:\/\/secure.gravatar.com\/avatar\/d661ab6b5aac096b40cc2fa83c39cd8f?s=24&d=mm&r=g","48":"https:\/\/secure.gravatar.com\/avatar\/d661ab6b5aac096b40cc2fa83c39cd8f?s=48&d=mm&r=g","96":"https:\/\/secure.gravatar.com\/avatar\/d661ab6b5aac096b40cc2fa83c39cd8f?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users"}]}}],"wp:featuredmedia":[{"id":414,"date":"2018-09-28T13:00:44","slug":"coordinator","type":"attachment","link":"https:\/\/quickbirdstudios.com\/blog\/ios-navigation-library-based-on-the-coordinator-pattern\/coordinator\/","title":{"rendered":"coordinator"},"author":2,"caption":{"rendered":"<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/coordinator.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/ios-navigation-library-based-on-the-coordinator-pattern\/coordinator\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/coordinator.jpg\" data-pin-description=\"coordinator\"\/>"},"alt_text":"","media_type":"image","mime_type":"image\/jpeg","media_details":{"width":2490,"height":1610,"file":"2018\/09\/coordinator.jpg","sizes":{"thumbnail":{"file":"coordinator-150x150.jpg","width":150,"height":150,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/coordinator-150x150.jpg"},"medium":{"file":"coordinator-300x194.jpg","width":300,"height":194,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/coordinator-300x194.jpg"},"medium_large":{"file":"coordinator-768x497.jpg","width":768,"height":497,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/coordinator-768x497.jpg"},"large":{"file":"coordinator-1024x662.jpg","width":1024,"height":662,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/coordinator-1024x662.jpg"},"spatial-index":{"file":"coordinator-840x560.jpg","width":840,"height":560,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/coordinator-840x560.jpg"},"spatial-masonry":{"file":"coordinator-550x356.jpg","width":550,"height":356,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/coordinator-550x356.jpg"},"full":{"file":"coordinator.jpg","width":2490,"height":1610,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/coordinator.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1","keywords":[]}},"source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/09\/coordinator.jpg","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/414"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/attachment"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=414"}]}}],"wp:term":[[{"id":1,"link":"https:\/\/quickbirdstudios.com\/blog\/category\/uncategorized\/","name":"Uncategorized","slug":"uncategorized","taxonomy":"category","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories\/1"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/taxonomies\/category"}],"wp:post_type":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts?categories=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}],[]]}},{"id":370,"date":"2018-08-21T06:47:11","date_gmt":"2018-08-21T06:47:11","guid":{"rendered":"https:\/\/quickbirdstudios.com\/blog\/?p=370"},"modified":"2018-10-08T14:05:21","modified_gmt":"2018-10-08T14:05:21","slug":"what-is-functional-reactive-programming-frp","status":"publish","type":"post","link":"https:\/\/quickbirdstudios.com\/blog\/what-is-functional-reactive-programming-frp\/","title":{"rendered":"What is Functional Reactive Programming (FRP)?"},"content":{"rendered":"<p>The new buzzword to impress your friends: Functional Reactive Programming (FRP)<\/p>\n<p><img class=\"aligncenter wp-image-384\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/FRP.jpg\" alt=\"\" width=\"750\" height=\"342\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/FRP.jpg 2490w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/FRP-300x137.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/FRP-768x350.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/FRP-1024x467.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/FRP-550x251.jpg 550w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>Using Functional Reactive Programming, you write less code, you have fewer bugs, you can program asynchronously without killing yourself, it\u2019s just awesome. That\u2019s what they told me. Everybody talks about it but many people don\u2019t really know what it fundamentally is. So what is it, at its very core? I mean, without the buzzwords, without the cryptic Rx\/Observable\/Subscriber keyword bullshit.<\/p>\n<h3>High-level view<\/h3>\n<p>To understand what Functional Reactive Programming is, first, you have to split this long clunky word apart:<\/p>\n<p><strong>Functional Reactive Programming = Functional Programming + Reactive Programming<\/strong><\/p>\n<p>That simplifies the problem at least a bit. Functional Reactive Programming is a programming paradigm that is based on functional programming and reactive programming. So we have to understand these two first to understand what\u2019s the whole thing.<\/p>\n<h3>What is functional programming?<\/h3>\n<p>Here is the definition of <a href=\"https:\/\/en.wikipedia.org\/wiki\/Functional_programming\">Wikipedia on Functional Programming<\/a>:<br \/>\n\u201cfunctional programming is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data\u201d<br \/>\nThat means in essence that in functional programming everything is expressed as a mathematical function.<\/p>\n<p><img class=\"aligncenter wp-image-372\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/questioning.jpg\" alt=\"\" width=\"500\" height=\"352\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/questioning.jpg 1000w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/questioning-300x211.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/questioning-768x541.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/questioning-550x387.jpg 550w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>Not really. Mathematical functions like the following have a property that many normal Java functions do not possess:<br \/>\n<strong>f(x) = y<\/strong><br \/>\nThey always give you the same output value (y) for a given input value (x).<br \/>\n<strong>g(a,b) = a + b<\/strong><br \/>\nIf I put in a=1, b=1 I will <strong>always<\/strong> get 2 as a result, no matter how often I calculate\/execute that. In non-functional programming environments that is not always the case:<br \/>\n<script src=\"https:\/\/gist.github.com\/maltebucksch\/474fecc08f9ec2069dcb928aa115eb54.js\"><\/script><br \/>\nThe result of the function will be different when I call it twice vs. only once. It changes a state that is outside of the function. That makes the result unpredictable. My program will behave differently depending on the number of executions.<br \/>\nThat\u2019s why functional programming is especially popular in the area of Research and Math. It allows you to prove mathematically that your program works as expected. Your function does not have any (mutable) state. It\u2019s 100% predictable what the output of a certain input will be. Functional programming languages like Haskell even enforce this. Everything is a function and there is no state.<\/p>\n<p>In non-functional programming languages (probably everything that you work with) there is no guarantee what will happen. You have the ability to save state. This is useful and necessary but it also makes your software less predictable. For example, bugs might arise after a server ran for 2 days, or after you pressed that button in an app too often.<\/p>\n<p>That\u2019s why many non-functional programming languages include elements from functional programming e.g. in their standard library. They offer functions like filter\/map\/reduce which make sub-parts of your software behave in a functional way. So in the end, not your whole software is functional but many critical sub-parts. This helps to prevent bugs.<\/p>\n<h3>What is Reactive Programming?<\/h3>\n<p>Reactive Programming is a paradigm that deals with data flow.<br \/>\nReactive libraries or programming languages\u2026<\/p>\n<ol>\n<li>\u2026allow you to easily express data flows.<\/li>\n<li>\u2026automatically evaluate your data flows and propagate data changes.<\/li>\n<\/ol>\n<p>It becomes clearer when we look at an example:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/maltebucksch\/8a912635815f0ac90b6d3d4a0e398efe.js\"><\/script><\/p>\n<p>You can see that the key difference in reactive programming is that state changes propagate automatically according to our defined data flow (a := b + c). In imperative programming, you always have to actively trigger those state changes.<\/p>\n<h3>So what is Functional Reactive Programming?<\/h3>\n<p>As mentioned, it\u2019s the combination of the functional programming paradigm and the reactive programming paradigm. You might not be aware of it but you already know and <strong>did<\/strong> Functional Reactive Programming.<\/p>\n<p>In fact, you did it pretty often&#8230; No way?<\/p>\n<p>Take a look at Excel:<img class=\"aligncenter wp-image-373 size-large\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/excel-1024x451.jpg\" alt=\"\" width=\"640\" height=\"282\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/excel-1024x451.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/excel-300x132.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/excel-768x338.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/excel-550x242.jpg 550w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>Excel offers functional and reactive programming paradigms to the user. These two paradigms are even a big reason why Excel is so popular. It allows you to calculate stuff reliably (functional \u2013 same input, same output) and it propagates those changes through your excel sheet (reactive \u2013 through defined data flows).<\/p>\n<h3>In practice<\/h3>\n<p>So how can I use Functional Reactive Programming? Most often you will use libraries for that like RxJava (or any other ReactiveX library). They allow you to model functional data flows in an easy manner.<br \/>\nThese data flows are like tubes with certain connectors that do something with the tube\u2019s content (data).<\/p>\n<p><img class=\"aligncenter wp-image-374 size-large\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/tubes-1024x415.png\" alt=\"\" width=\"640\" height=\"259\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/tubes-1024x415.png 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/tubes-300x122.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/tubes-768x311.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/tubes-550x223.png 550w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>At the beginning always sits a data producer, the keyboard in that case. At the end of the data flow, represented by the tubes above, there is a subscriber\/listener. The subscriber\/listener wants to act on the result, for example, to update the UI of your software. In between, you have connectors, also called Operators: Here we have a <a href=\"http:\/\/reactivex.io\/documentation\/operators\/filter.html\">filter connector<\/a> and a <a href=\"http:\/\/reactivex.io\/documentation\/operators\/map.html\">map connector<\/a> that manipulate data when it flows through the tube. That\u2019s how you model all of your data flows if you use libraries like RxJava.<\/p>\n<p>In code, the example above would like this with RxJava:<br \/>\n<script src=\"https:\/\/gist.github.com\/maltebucksch\/325effc06a23d945e9130fa818da2064.js\"><\/script><\/p>\n<p>If this introduction got you excited, take a look at our blog article on <a href=\"https:\/\/quickbirdstudios.com\/blog\/app-architecture-our-functional-mvvm-approach-with-rx\/\">how to write functional reactive User Interfaces<\/a>. Or, if you first want to know more about the topic check out\u00a0<a href=\"https:\/\/gist.github.com\/staltz\/868e7e9bc2a7b8c1f754\">this great tutorial<\/a>\u00a0on FRP.<\/p>\n<h3>Conclusion<\/h3>\n<p>We love Functional Reactive Programming and use it in almost every app (via RxJava\/RxKotlin\/RxSwift).<br \/>\nThe <strong>functional<\/strong> part of it helps to write more predictable software with fewer bugs.<br \/>\nThe <strong>reactive<\/strong> part it allows you to write responsive UIs that update automatically when the corresponding data changes somewhere in your app.<br \/>\nIt takes some time getting used to it since the concept is fundamentally different from what most people are used to. After an initial learning period though, it\u2019s easy to fall in love with it\u00a0\u2764<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-2.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/what-is-functional-reactive-programming-frp\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-2.jpg\" data-pin-description=\"What is Functional Reactive Programming (FRP)?\"\/>","protected":false},"excerpt":{"rendered":"<p>The new buzzword to impress your friends: Functional Reactive Programming (FRP) Using Functional Reactive Programming, you write less code, you have fewer bugs, you can program asynchronously without killing yourself, it\u2019s just awesome. That\u2019s what they told me. Everybody talks about it but many people don\u2019t really know what it fundamentally is. So what is [&hellip;]<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-2.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/what-is-functional-reactive-programming-frp\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-2.jpg\" data-pin-description=\"What is Functional Reactive Programming (FRP)?\"\/>","protected":false},"author":2,"featured_media":390,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/370"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=370"}],"version-history":[{"count":14,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/370\/revisions"}],"predecessor-version":[{"id":391,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/370\/revisions\/391"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/390"}],"wp:attachment":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=370"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=370"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]},"_embedded":{"author":[{"id":2,"name":"Malte Bucksch","url":"https:\/\/quickbirdstudios.com\/blog","description":"","link":"https:\/\/quickbirdstudios.com\/blog\/author\/quickbird\/","slug":"quickbird","avatar_urls":{"24":"https:\/\/secure.gravatar.com\/avatar\/dc8955c6a4bebbaffc0f99f21f757f13?s=24&d=mm&r=g","48":"https:\/\/secure.gravatar.com\/avatar\/dc8955c6a4bebbaffc0f99f21f757f13?s=48&d=mm&r=g","96":"https:\/\/secure.gravatar.com\/avatar\/dc8955c6a4bebbaffc0f99f21f757f13?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users"}]}}],"wp:featuredmedia":[{"id":390,"date":"2018-08-21T07:21:26","slug":"cover-3","type":"attachment","link":"https:\/\/quickbirdstudios.com\/blog\/what-is-functional-reactive-programming-frp\/cover-3\/","title":{"rendered":"cover"},"author":2,"caption":{"rendered":"<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-2.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/what-is-functional-reactive-programming-frp\/cover-3\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-2.jpg\" data-pin-description=\"cover\"\/>"},"alt_text":"","media_type":"image","mime_type":"image\/jpeg","media_details":{"width":779,"height":653,"file":"2018\/08\/cover-2.jpg","sizes":{"thumbnail":{"file":"cover-2-150x150.jpg","width":150,"height":150,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-2-150x150.jpg"},"medium":{"file":"cover-2-300x251.jpg","width":300,"height":251,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-2-300x251.jpg"},"medium_large":{"file":"cover-2-768x644.jpg","width":768,"height":644,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-2-768x644.jpg"},"spatial-index":{"file":"cover-2-779x560.jpg","width":779,"height":560,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-2-779x560.jpg"},"spatial-masonry":{"file":"cover-2-550x461.jpg","width":550,"height":461,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-2-550x461.jpg"},"full":{"file":"cover-2.jpg","width":779,"height":653,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-2.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1","keywords":[]}},"source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-2.jpg","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/390"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/attachment"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=390"}]}}],"wp:term":[[{"id":1,"link":"https:\/\/quickbirdstudios.com\/blog\/category\/uncategorized\/","name":"Uncategorized","slug":"uncategorized","taxonomy":"category","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories\/1"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/taxonomies\/category"}],"wp:post_type":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts?categories=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}],[]]}},{"id":340,"date":"2018-08-06T07:43:14","date_gmt":"2018-08-06T07:43:14","guid":{"rendered":"https:\/\/quickbirdstudios.com\/blog\/?p=340"},"modified":"2019-07-25T12:32:48","modified_gmt":"2019-07-25T12:32:48","slug":"software-design-pattern-composite-by-induction","status":"publish","type":"post","link":"https:\/\/quickbirdstudios.com\/blog\/software-design-pattern-composite-by-induction\/","title":{"rendered":"Software Design Pattern: Composite by Induction"},"content":{"rendered":"<p><img class=\"aligncenter size-large wp-image-355\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-1024x339.jpg\" alt=\"\" width=\"640\" height=\"212\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-1024x339.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-300x99.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-768x254.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-550x182.jpg 550w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>We at QuickBird Studios are often faced with a wide variety of problems. Some of them are very easy to solve, some of them are very, very hard and some are \u2026 let&#8217;s say\u2026 \u201every unique\u201c \ud83d\ude05. We tried a lot of different patterns and strategies to solve those problems and one pattern that we fell in love with is the\u00a0<em>Composite Pattern<\/em>. We call our own approach to this pattern\u00a0<em>Composite by Induction<\/em>\u00a0(short\u00a0<em>Induction<\/em>) and it enables you to use the composite pattern in very complex situations with very low effort.<\/p>\n<h3>Composite Pattern<\/h3>\n<p>Here is a very quick refresh of the composite pattern. Feel free to skip this part if you are already familiar with it!<\/p>\n<p>\u201eThe composite pattern describes a group of objects that are treated the same way as a single instance of the same type of object.\u201c\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/Composite_pattern\">Wikipedia<\/a><\/p>\n<p>As a developer, whether or not you thought about it, you most likely encountered the composite pattern many times in your career. One of the simplest and most straightforward examples would be Android\u2019s\u00a0<em>View-System<\/em>. Any\u00a0<code>View<\/code> can do stuff like\u00a0<em>draw yourself to a canvas<\/em>,\u00a0<em>setAlpha<\/em>\u00a0or\u00a0<em>animate<\/em>. You can group or layout those\u00a0<code>View<\/code>s by putting them into a certain\u00a0<em>Layout<\/em>\u00a0which extends\u00a0<code>ViewGroup<\/code>. Obviously, this\u00a0<code>ViewGroup<\/code>\u00a0itself can\u00a0<em>draw itself to a canvas<\/em>,\u00a0<em>setAlpha<\/em>, or\u00a0<em>animate<\/em>, because a\u00a0<code>ViewGroup<\/code>\u00a0itself is just an implementation of\u00a0<code>View<\/code>\u00a0\ud83e\uddd0<\/p>\n<figure id=\"attachment_343\" aria-describedby=\"caption-attachment-343\" style=\"width: 400px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-343\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/View_UML-2-300x241.png\" alt=\"\" width=\"400\" height=\"321\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/View_UML-2-300x241.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/View_UML-2-768x616.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/View_UML-2-1024x822.png 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/View_UML-2-550x441.png 550w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/View_UML-2.png 1563w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><figcaption id=\"caption-attachment-343\" class=\"wp-caption-text\">Example of the Composite Pattern: Android View Hierarchy<\/figcaption><\/figure>\n<h3>Induction<\/h3>\n<p>Let\u2019s imagine you are building an app to track the weight of your customers. One feature you want to implement is the detection of certain data-patterns to help your users to better understand their health and behaviors. So you start thinking about potential patterns that could add value to your customers when detected. You quickly came up with many ideas: Maybe you want to detect your customers cheat days \ud83e\udd14. You definitely want to find up &amp; downtrends in the data and maybe even encourage \u201egood\u201c trends inside your app.<\/p>\n<figure id=\"attachment_355\" aria-describedby=\"caption-attachment-355\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-355 size-large\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-1024x339.jpg\" alt=\"\" width=\"640\" height=\"212\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-1024x339.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-300x99.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-768x254.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-550x182.jpg 550w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-355\" class=\"wp-caption-text\">Let&#8217;s build a weight tracker that detects up &amp; downtrends<\/figcaption><\/figure>\n<p>After you defined your\u00a0<code>Pattern<\/code> interface, you start modeling the detection of those and you came up with a very simple interface:<br \/>\n<script src=\"https:\/\/gist.github.com\/maltebucksch\/eb665eb195fe4177a4aed0d115f22bb6.js\"><\/script><br \/>\nIt is a good idea to split the problem of detecting patterns into smaller problems. It sounds clever to have a certain\u00a0<code>PatternDetector<\/code>\u00a0for each pattern you want to support. So you start implementing a\u00a0<code>CheatDayPatternDetector<\/code>\u00a0,\u00a0<code>DownTrendPatternDetector<\/code>\u00a0,\u00a0<code>UpTrendPatternDetector<\/code>, etc. which obviously all implement the same interface\u00a0<code>PatternDetector<\/code>.<br \/>\nBut wait \ud83e\uddd0. Obviously, there is a very simple way that you can represent all those implementations as a single instance of\u00a0<code>PatternDetector<\/code>\u00a0instead of a\u00a0<code>List&lt;PatternDetector&gt;<\/code>. Induction makes this possible by solving this problem for the simplest case. Maybe, if we combine two\u00a0<code>PatternDetector<\/code>\u00a0instances, we have a new\u00a0<code>PatternDetector<\/code>\u00a0which is just more powerful? Maybe we could combine an instance of\u00a0<code>DownTrendPatternDetector<\/code>\u00a0with an instance of\u00a0<code>UpTrendPatternDetector<\/code>\u00a0to get a more powerful PatternDetector able to detect down- &amp; uptrends. Here is how you could do this using induction.<\/p>\n<h3><a id=\"Create_a_connector_26\"><\/a>Create a connector<\/h3>\n<p>A\u00a0<em>Connector<\/em>\u00a0is a class which knows how to\u00a0<em>combine<\/em>\u00a0two instances of an interface and itself implements this very own interface itself.<\/p>\n<p><img class=\"aligncenter wp-image-347\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/ConnectorUML-2-2.jpg\" alt=\"\" width=\"500\" height=\"463\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/ConnectorUML-2-2.jpg 843w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/ConnectorUML-2-2-300x278.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/ConnectorUML-2-2-768x711.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/ConnectorUML-2-2-550x509.jpg 550w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>Let\u2019s take our weight-app example and think how a combination of two\u00a0<code>PatternDetector<\/code>\u00a0instances should behave. This is very simple \u261d! We just expect the combination to return a list containing all patterns found by the first detector and all patterns found by the second connector as a list!<br \/>\n<script src=\"https:\/\/gist.github.com\/sellmair\/df8d8c17a196e3a86e40fb11756a3e69.js\"><\/script><br \/>\n<img src=\"https:\/\/dillinger.io\/Composite%20by%20Induction\/ConnectorUML%20(2)%202.png\" alt=\"\" \/><\/p>\n<h3><a id=\"Create_a_combine_function_45\"><\/a>Create a combine function<\/h3>\n<p>We do not want to deal with the connector type directly. Instead, we create a combine function as extension function on\u00a0<code>PatternDetector<\/code>\u00a0which only exposes the desired interface.<br \/>\n<script src=\"https:\/\/gist.github.com\/sellmair\/cd8d0eb12133f54f7eb63be8810455dd.js\"><\/script><br \/>\nIf we would now combine the\u00a0<code>DownTrendPatternDetector<\/code>\u00a0with an instance of\u00a0<code>UpTrendPatternDetector<\/code>\u00a0we would get a new\u00a0<code>PatternDetector<\/code>\u00a0able to detect up- and downtrends in our weight-data:<br \/>\n<img src=\"https:\/\/dillinger.io\/Composite%20by%20Induction\/Weight-Downtrend%202.png\" alt=\"\" \/><img class=\"aligncenter size-large wp-image-348\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/Weight-Downtrend-3-951x1024.jpg\" alt=\"\" width=\"640\" height=\"689\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/Weight-Downtrend-3-951x1024.jpg 951w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/Weight-Downtrend-3-279x300.jpg 279w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/Weight-Downtrend-3-768x827.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/Weight-Downtrend-3-550x592.jpg 550w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<h3><a id=\"Compose_your_final_instance_58\"><\/a>Compose your final instance<\/h3>\n<p>Now, one can easily get the final combined instance by chaining all specific instances together.<br \/>\n<script src=\"https:\/\/gist.github.com\/sellmair\/aed7ec9d3a53a4a5c1cf958b9953649c.js\"><\/script><\/p>\n<h3><a id=\"Using_different_connectors_to_express_logic_72\"><\/a>Using different connectors to express logic<\/h3>\n<p>The given weight-app example is very simple and connecting two instances of a certain type can get very difficult sometimes. Some problem, that we encountered is that the trivial combine logic is not always desired. What if we want to favor a certain\u00a0<code>PatternDetector<\/code>\u00a0over another? What if we want to prevent two pattern detectors to respond on the same area on the data?<br \/>\nThis logic can be expressed by using different connectors and different extension functions.<br \/>\nLet\u2019s have a look back up where we combined an instance of\u00a0<code>DownTrendPatternDetector<\/code>\u00a0with one of\u00a0<code>UpTrendPatternDetector<\/code>: We notice that both instances are declaring a small shared area as\u00a0<em>UPTREND<\/em>\u00a0as well as\u00a0<em>DOWNTREND<\/em>\u00a0which is not that cool\u00a0\ud83e\udd14<\/p>\n<p><img class=\"aligncenter size-large wp-image-349\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/Weight-Downtrend-combiner-2-698x1024.jpg\" alt=\"\" width=\"640\" height=\"939\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/Weight-Downtrend-combiner-2-698x1024.jpg 698w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/Weight-Downtrend-combiner-2-204x300.jpg 204w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/Weight-Downtrend-combiner-2-768x1127.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/Weight-Downtrend-combiner-2-550x807.jpg 550w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>Let\u2019s implement an alternative\u00a0<em>Connector<\/em>\u00a0that alters detected patterns to avoid overlays. We could do this by splitting the overlapping area in half, making the overlapping patterns smaller in size!<br \/>\n<script src=\"https:\/\/gist.github.com\/sellmair\/678ce85356bfff5584b9b8686e434e29.js\"><\/script><br \/>\n<script src=\"https:\/\/gist.github.com\/sellmair\/368243c3ca659e53313287ef766b42be.js\"><\/script><br \/>\nWe can now compose our final production-ready instance of\u00a0<code>PatternDetector<\/code>\u00a0by using our two distinct\u00a0<em>combine-<\/em>methods!<br \/>\n<script src=\"https:\/\/gist.github.com\/sellmair\/d888eba26d3c7ca7d9936b1e4a52a50d.js\"><\/script><\/p>\n<h2><a id=\"Conclusion_132\"><\/a>Conclusion<\/h2>\n<p>We are using\u00a0<em>Composite by Induction<\/em>\u00a0in a wide variety of projects and circumstances:<\/p>\n<ul>\n<li>We combine multiple\u00a0<code>ShapeDetector<\/code>\u00a0instances to find basic shapes like circles or polygons in images<\/li>\n<li>We model the data layer of apps by combining multiple\u00a0<code>DataSource<\/code>\u00a0instances<\/li>\n<li>We build beautiful animations by combining multiple\u00a0<code>Animation<\/code>\u00a0instances<\/li>\n<\/ul>\n<p>Obviously, it is almost always easier to combine\u00a0<em>n<\/em>\u00a0instances of a certain type by combining always 2 instead of combining them all together at once. That&#8217;s why this pattern can even simplify your thinking process. You solve a problem for two instances and you&#8217;re afterward able to apply it to n instances.<\/p>\n<p>If you want to know more about how we architect mobile apps, check out <a href=\"https:\/\/quickbirdstudios.com\/blog\/app-architecture-our-functional-mvvm-approach-with-rx\/\">this article about our approach to MVVM, a modern UI architecture pattern<\/a>.<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/software-design-pattern-composite-by-induction\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover.jpg\" data-pin-description=\"Software Design Pattern: Composite by Induction\"\/>","protected":false},"excerpt":{"rendered":"<p>We at QuickBird Studios are often faced with a wide variety of problems. Some of them are very easy to solve, some of them are very, very hard and some are \u2026 let&#8217;s say\u2026 \u201every unique\u201c \ud83d\ude05. We tried a lot of different patterns and strategies to solve those problems and one pattern that we [&hellip;]<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/software-design-pattern-composite-by-induction\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover.jpg\" data-pin-description=\"Software Design Pattern: Composite by Induction\"\/>","protected":false},"author":7,"featured_media":355,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/340"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=340"}],"version-history":[{"count":21,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/340\/revisions"}],"predecessor-version":[{"id":829,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/340\/revisions\/829"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/355"}],"wp:attachment":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]},"_embedded":{"author":[{"id":7,"name":"Sebastian Sellmair","url":"","description":"","link":"https:\/\/quickbirdstudios.com\/blog\/author\/sellmair\/","slug":"sellmair","avatar_urls":{"24":"https:\/\/secure.gravatar.com\/avatar\/da409b5f2e5bfc09de7b34ed68df2c89?s=24&d=mm&r=g","48":"https:\/\/secure.gravatar.com\/avatar\/da409b5f2e5bfc09de7b34ed68df2c89?s=48&d=mm&r=g","96":"https:\/\/secure.gravatar.com\/avatar\/da409b5f2e5bfc09de7b34ed68df2c89?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users"}]}}],"wp:featuredmedia":[{"id":355,"date":"2018-08-06T06:29:00","slug":"cover","type":"attachment","link":"https:\/\/quickbirdstudios.com\/blog\/software-design-pattern-composite-by-induction\/cover\/","title":{"rendered":"cover"},"author":2,"caption":{"rendered":"<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/software-design-pattern-composite-by-induction\/cover\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover.jpg\" data-pin-description=\"cover\"\/>"},"alt_text":"","media_type":"image","mime_type":"image\/jpeg","media_details":{"width":1749,"height":579,"file":"2018\/08\/cover.jpg","sizes":{"thumbnail":{"file":"cover-150x150.jpg","width":150,"height":150,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-150x150.jpg"},"medium":{"file":"cover-300x99.jpg","width":300,"height":99,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-300x99.jpg"},"medium_large":{"file":"cover-768x254.jpg","width":768,"height":254,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-768x254.jpg"},"large":{"file":"cover-1024x339.jpg","width":1024,"height":339,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-1024x339.jpg"},"spatial-index":{"file":"cover-840x560.jpg","width":840,"height":560,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-840x560.jpg"},"spatial-masonry":{"file":"cover-550x182.jpg","width":550,"height":182,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover-550x182.jpg"},"full":{"file":"cover.jpg","width":1749,"height":579,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1","keywords":[]}},"source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/08\/cover.jpg","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/355"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/attachment"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=355"}]}}],"wp:term":[[{"id":1,"link":"https:\/\/quickbirdstudios.com\/blog\/category\/uncategorized\/","name":"Uncategorized","slug":"uncategorized","taxonomy":"category","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories\/1"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/taxonomies\/category"}],"wp:post_type":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts?categories=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}],[]]}},{"id":222,"date":"2018-06-26T08:32:36","date_gmt":"2018-06-26T08:32:36","guid":{"rendered":"https:\/\/quickbirdstudios.com\/blog\/?p=222"},"modified":"2019-07-25T12:32:21","modified_gmt":"2019-07-25T12:32:21","slug":"sync-realm-with-server","status":"publish","type":"post","link":"https:\/\/quickbirdstudios.com\/blog\/sync-realm-with-server\/","title":{"rendered":"Syncing app data: Sync Realm with server-side database like MySQL"},"content":{"rendered":"<p><img class=\" wp-image-247 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/2bh9cg.jpg\" alt=\"\" width=\"452\" height=\"339\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/2bh9cg.jpg 620w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/2bh9cg-300x225.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/2bh9cg-550x413.jpg 550w\" sizes=\"(max-width: 452px) 100vw, 452px\" \/><\/p>\n<p>Over the last couple of months, Realm became the go-to mobile database solution. It&#8217;s a mobile, offline-first database solution to store your app&#8217;s data without the need of working with lower level solutions like SQLite or Core Data. And most importantly: It&#8217;s platform independent and works on Android and iOS. But what happens if you want to sync your local database with a remote server which uses a database like MySQL?<\/p>\n<p>Since most apps are connected to a backend-service as well, things start to get more complicated. Your app should always work seamlessly without an internet connection but still needs to sync data to a remote server. <a href=\"https:\/\/realm.io\/products\/realm-platform\/\">Realm&#8217;s Mobile Platform<\/a>\u00a0could be a solution because it syncs the data automatically for you, but you also have to depend on an extra service that costs <strong>a lot of<\/strong> money.<\/p>\n<p>Today, we will demonstrate a more generic, easier solution by adding an automatic sync service to your app without touching your existing logic. The goal is an easy-to-setup sync service class that manages the complexity of sending your data changes to your REST service <strong>automatically<\/strong> when the local database changes. The REST service could then e.g. manifest those changes in a database like MySQL on the server. Which one you choose is up to you.<\/p>\n<h3><strong>Making data-syncing less complex<\/strong><\/h3>\n<p>Syncing data with a remote server leads to a more complex architecture, often consisting of different services managing your local database and your network service:<\/p>\n<p><img class=\"size-full wp-image-241 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/NA.png\" alt=\"\" width=\"763\" height=\"123\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/NA.png 763w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/NA-300x48.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/NA-550x89.png 550w\" sizes=\"(max-width: 763px) 100vw, 763px\" \/><\/p>\n<p>To avoid this added complecety we developed a technique that we call <strong>Database-Driven Architecture<\/strong>. The database will be the main component of the architecture. The other components derive their actions by observing changes in the database:<\/p>\n<p><img class=\"size-full wp-image-242 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/DDA-1.png\" alt=\"\" width=\"563\" height=\"123\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/DDA-1.png 563w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/DDA-1-300x66.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/DDA-1-550x120.png 550w\" sizes=\"(max-width: 563px) 100vw, 563px\" \/><\/p>\n<p>We propose to use Realm&#8217;s <a href=\"https:\/\/academy.realm.io\/posts\/live-objects-fine-grained-notifications-realm-update\/\">reactive feature for live updating data objects<\/a> to build an easy and robust solution. In combination with Swift 4&#8217;s addition of `Codable`, we can make our lightweight solution with around 100 lines of code and still be able to manage all the complexity of detecting changes and sending them to our server.<\/p>\n<h3><b>Our sample app<\/b><\/h3>\n<p>You can start by <a href=\"https:\/\/gitlab.com\/quickbirdstudios\/ream-rest-sync\/realm-rest-sync\">downloading our sample project<\/a> consisting of a simple app that shows a list of users with a timestamp of their last update. You can swipe cells to delete a user and add a new one by clicking the plus button. Our app already uses Realm to store the user objects in a database. All the logic is currently in the ViewController class which we will<strong> not touch at all<\/strong>.<\/p>\n<p><img class=\"aligncenter wp-image-223\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/sample-576x1024.png\" alt=\"\" width=\"400\" height=\"711\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/sample-576x1024.png 576w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/sample-169x300.png 169w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/sample-550x978.png 550w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/sample.png 723w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/p>\n<p>Next up, we take a look at our <code class=\"code-inline\">User<\/code> class. As always, it&#8217;s a subclass of Realm&#8217;s Object class so that it can be managed by its database:<br \/>\n<script src=\"https:\/\/gist.github.com\/maltebucksch\/5850d4e2619988b682e5f1811ee83687.js\"><\/script><br \/>\nThe <code class=\"code-inline\">User<\/code> object consists of an <code class=\"code-inline\">id<\/code>, a <code class=\"code-inline\">username<\/code> and an <code class=\"code-inline\">updatedDate<\/code> property to store its last update.<\/p>\n<h3>Define the needed protocols and update your models<\/h3>\n<p>To make our app sync the user data to the server we need to know how the API is structured. Our REST API consists of<\/p>\n<ol>\n<li>a\u00a0<code class=\"code-inline\">POST \/users<\/code> endpoint to add a new user<\/li>\n<li>a\u00a0<code class=\"code-inline\">PUT \/users\/:id<\/code>\u00a0endpoint to update users<\/li>\n<li>a\u00a0<code class=\"code-inline\">DELETE \/users\/:id<\/code> endpoint to delete user<\/li>\n<\/ol>\n<p>Via this API database changes are propagated to the server-side database. However, since the REST service is decoupled from a specific implementation this could be a MySQL database but it just as well could be a NoSQL database like CouchDB.<\/p>\n<p>Next up, we define a new protocol called <code class=\"code-inline\">Uploadable<\/code>. It defines all the information we need to upload an object of that type to our endpoint. Thanks to Swift&#8217;s <code class=\"code-inline\">Codable<\/code> protocol our definition is super easy.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/grafele\/35633e6cfc62fc03c40dd3e043ce6726.js\"><\/script><\/p>\n<p>We only need our Model class to conform to the <code class=\"code-inline\">Uploadable<\/code>-protocol to convert it into a JSON representation for the API-requests. We do this by adding the computed property <code class=\"code-inline\">resouceURL<\/code>:<br \/>\n<script src=\"https:\/\/gist.github.com\/grafele\/4b7ffefcb34ba4d82ca11d956267fc4f.js\"><\/script><\/p>\n<h3>Detecting changes in the database<\/h3>\n<p>Now we are able to go one step further and add some helper methods to our <code class=\"code-inline\">Uploadable<\/code> protocol. The <code class=\"code-inline\">getId()<\/code> method returns the <b>String<\/b> representation of the object&#8217;s id. That doesn&#8217;t necessarily mean your object&#8217;s primary key must be a <b>String<\/b>, it can also be an <b>Int<\/b>. But all of our managed objects need to have a primary key set to make them identifiable. Additionally, we add the helper method <code class=\"code-inline\">encoded<\/code> to convert our models to their JSON representation:<br \/>\n<script src=\"https:\/\/gist.github.com\/maltebucksch\/9b35e2d0b8db13da67f87b4ff4ac501f.js\"><\/script><\/p>\n<p>Finally, we get to the part of detecting changes in our database. We define a static <code class=\"code-inline\">registerNotificationObserver<\/code> method that registers a Realm observer for a specific model class. We collect the inserted, modified and deleted objects and return them in form of an <code class=\"code-inline\">Update<\/code> struct that contains all of these objects. Realm does not allow us to access the deleted objects after we received their change notification. That&#8217;s why we store the objects&#8217;\u00a0ids in the database instead and use them in the <code class=\"code-inline\">Update<\/code> struct:<br \/>\n<script src=\"https:\/\/gist.github.com\/maltebucksch\/988dc9db879bba0b25c8c01dde0694bb.js\"><\/script><\/p>\n<h3>Writing the SyncService<\/h3>\n<p>Now that we know how to observe changes for a specific model type, we have to define an object which actually defines the classes being managed. We want it to be easily initialized in a single line of code with the most basic configuration possible, for example:<br \/>\n<script src=\"https:\/\/gist.github.com\/maltebucksch\/9edabefabbf06c9571d852c2c976994f.js\"><\/script><br \/>\nWe pass an array of classes to be synced to our initializer. Optionally we pass in the realm instance. Otherwise, one with the default configuration will be created. To give the SyncService a lifetime without the need of additional start and stop methods, we use Automatic Reference Counting (ARC). As long as we have at least one strong reference to our <code class=\"code-inline\">SyncService<\/code> instance, it keeps syncing the object changes. That makes it a perfect fit for the AppDelegate class. We can keep the SyncService sync changes to the server for the whole runtime of the app by adding a single of code to the <code class=\"code-inline\">application-didFinishLaunchingWithOptions<\/code> method:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/maltebucksch\/1388939caaa789a6b5a2abedc3e30f5c.js\"><\/script><\/p>\n<p>Since we now know how we want our interface to look like we need to implement our <code class=\"code-inline\">SyncService<\/code> class. We create the class with its initializer to inject realm as a dependency and to define the synced model types.<br \/>\n<script src=\"https:\/\/gist.github.com\/maltebucksch\/6f3a1dfe9b3f9a095dca884df9881266.js\"><\/script><\/p>\n<p>We create database change observers for each element in <code class=\"code-inline\">modelTypes<\/code>. We store them in an instance variable to bind their lifetime to the lifetime of our SyncService class instance. Finally, we use a static <code class=\"code-inline\">handleUpdate<\/code> method for reacting to database changes:<br \/>\n<script src=\"https:\/\/gist.github.com\/grafele\/9be6a65c5e51dd8211a799999ab97d3f.js\"><\/script><\/p>\n<p>The <code class=\"code-inline\">handleUpdate<\/code> implementation is quite simple. It calls our method for uploading new, updated or deleted objects to the remote server. We use the same method for uploading new objects and updating existing objects because for both of them we need to send the whole JSON representation of our model to the server. The only difference will be the API endpoint and the HTTP Method used, therefore we pass a boolean property <code class=\"code-inline\">update<\/code> to the upload method.<\/p>\n<h3>Sending updates to the server<\/h3>\n<p>Let&#8217;s implement our upload and delete methods now:<br \/>\n<script src=\"https:\/\/gist.github.com\/grafele\/be8b74778d721373e91b768d061434fd.js\"><\/script><\/p>\n<p>Ok, this code speaks for itself. We define all the properties needed to perform the network request, like the HTTP method, endpoint and body data. Finally, we call a <code class=\"code-inline\">performRequest<\/code> method that handles the actual network request.<\/p>\n<p>Before we write the actual network code we write a dummy implementation. It just logs everything to the console to test the functionality of our SyncService more easily:<br \/>\n<script src=\"https:\/\/gist.github.com\/grafele\/5a5f6624981510b018b1bf777f432798.js\"><\/script><\/p>\n<p>If we open the app and click the <b>+<\/b> button we can see a first log statement:<\/p>\n<pre><code class=\"code-multiline\">POST: \/api\/users\r\n{\"id\":720983718,\"username\":\"720983718\",\"updatedDate\":549106474.768875}<\/code><\/pre>\n<p>Our <code class=\"code-inline\">ViewController<\/code> code added a new <code class=\"code-inline\">User<\/code> to the database and our <code class=\"code-inline\">SyncService<\/code> detected the changes. If we now click on a cell, we update the User object. We can see a log statement that looks like this:<\/p>\n<pre><code class=\"code-multiline\">PUT: \/api\/users\/720983718\r\n{\"id\":720983718,\"username\":\"720983718\",\"updatedDate\":549106504.51612198}<\/code><\/pre>\n<p>We can see that we used the PUT method now and changed the API endpoint to include the object&#8217;s id. Finally, our object has a new <code class=\"code-inline\">updatedDate<\/code>.<\/p>\n<p>Last but not least we swipe over a cell to delete it and see the following log statement:<\/p>\n<pre><code class=\"code-multiline\">DELETE: \/api\/users\/720983718<\/code><\/pre>\n<p><img class=\"wp-image-229 size-full aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/final.gif\" alt=\"\" width=\"480\" height=\"906\" \/><\/p>\n<h3>Wrap up<\/h3>\n<p>Wow, that was easy. Our <code class=\"code-inline\">SyncService<\/code> class does all the magic for us. It detects changes in the database and it performs the network requests for us. It does all of that without touching our existing logic code in the <code class=\"code-inline\">ViewController<\/code>.\u00a0To make a second model automatically sync, we only need it to conform to our <code class=\"code-inline\">Uploadable<\/code> protocol and add it to the array of synced model types.<br \/>\nThanks to Swift 4&#8217;s <b>Codable<\/b> addition we were able to create a JSON representation of our models without writing code. If our JSON API wraps multiple models in one parent model we can do that easily: We just don&#8217;t add the child model to the <code class=\"code-inline\">modelTypes<\/code> array. That means our sync service doesn&#8217;t observe the database for this child model at all, but if the parents model changes we sync the whole parent object with its child objects.<br \/>\nYou can download the full source code of the sample project containing all the changes <a href=\"https:\/\/gitlab.com\/quickbirdstudios\/ream-rest-sync\/realm-rest-sync-after\">from here<\/a>.<\/p>\n<p>Unlike Realm&#8217;s Mobile Platform which enforces Realm also on the server-side, the REST service is not tied to any specific database implementation. We can choose MySQL but we could just as well choose Firebase or Cloudkit. That prevents a vendor lock-in in the future, keeping us flexibel.<br \/>\nFinally, we see that our idea of a <b>Database-Driven Architecture<\/b> makes our code cleaner and easier to read. In the current version, our only real dependency is Realm and we can work with it in whatever way we want. Since CoreData and SQLite can also offer you notifications when data changed we can implement the same feature for them, but it&#8217;s just a little bit more effort.<\/p>\n<p>All of this is just the first step. There is still a lot of work left to make this solution even more powerful and more generic:<\/p>\n<ul>\n<li>implement retry mechanism if the internet connection is not stable<\/li>\n<li>fetch data from the service<\/li>\n<li>detect changes and download only minimal necessary changesets<\/li>\n<li>use swift models on the server to autogenerate REST service for you<\/li>\n<li>build a bridge to push changes from server to the client and vice versa without delay<\/li>\n<li>support other database systems<\/li>\n<\/ul>\n<p>This could easily be realized in a framework and\/or toolset implementation to bring all of these ideas to life. You can expect more from us to come in the following weeks and months. Stay tuned! \ud83d\ude0e<\/p>\n<p>Example-project: <a href=\"https:\/\/gitlab.com\/quickbirdstudios\/ream-rest-sync\/realm-rest-sync\">State before<\/a>, <a href=\"https:\/\/gitlab.com\/quickbirdstudios\/ream-rest-sync\/realm-rest-sync-after\">State after<\/a><\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/2bh9cg.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/sync-realm-with-server\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/2bh9cg.jpg\" data-pin-description=\"Syncing app data: Sync Realm with server-side database like MySQL\"\/>","protected":false},"excerpt":{"rendered":"<p>Over the last couple of months, Realm became the go-to mobile database solution. It&#8217;s a mobile, offline-first database solution to store your app&#8217;s data without the need of working with lower level solutions like SQLite or Core Data. And most importantly: It&#8217;s platform independent and works on Android and iOS. But what happens if you [&hellip;]<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/2bh9cg.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/sync-realm-with-server\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/2bh9cg.jpg\" data-pin-description=\"Syncing app data: Sync Realm with server-side database like MySQL\"\/>","protected":false},"author":4,"featured_media":247,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/222"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=222"}],"version-history":[{"count":43,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/222\/revisions"}],"predecessor-version":[{"id":828,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/222\/revisions\/828"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/247"}],"wp:attachment":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]},"_embedded":{"author":[{"id":4,"name":"Stefan Kofler","url":"","description":"","link":"https:\/\/quickbirdstudios.com\/blog\/author\/stefan\/","slug":"stefan","avatar_urls":{"24":"https:\/\/secure.gravatar.com\/avatar\/d661ab6b5aac096b40cc2fa83c39cd8f?s=24&d=mm&r=g","48":"https:\/\/secure.gravatar.com\/avatar\/d661ab6b5aac096b40cc2fa83c39cd8f?s=48&d=mm&r=g","96":"https:\/\/secure.gravatar.com\/avatar\/d661ab6b5aac096b40cc2fa83c39cd8f?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users"}]}}],"wp:featuredmedia":[{"id":247,"date":"2018-06-02T13:02:34","slug":"2bh9cg","type":"attachment","link":"https:\/\/quickbirdstudios.com\/blog\/sync-realm-with-server\/2bh9cg\/","title":{"rendered":"2bh9cg"},"author":4,"caption":{"rendered":"<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/2bh9cg.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/sync-realm-with-server\/2bh9cg\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/2bh9cg.jpg\" data-pin-description=\"2bh9cg\"\/>"},"alt_text":"","media_type":"image","mime_type":"image\/jpeg","media_details":{"width":620,"height":465,"file":"2018\/06\/2bh9cg.jpg","sizes":{"thumbnail":{"file":"2bh9cg-150x150.jpg","width":150,"height":150,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/2bh9cg-150x150.jpg"},"medium":{"file":"2bh9cg-300x225.jpg","width":300,"height":225,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/2bh9cg-300x225.jpg"},"spatial-masonry":{"file":"2bh9cg-550x413.jpg","width":550,"height":413,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/2bh9cg-550x413.jpg"},"full":{"file":"2bh9cg.jpg","width":620,"height":465,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/2bh9cg.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/2bh9cg.jpg","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/247"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/attachment"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=247"}]}}],"wp:term":[[{"id":1,"link":"https:\/\/quickbirdstudios.com\/blog\/category\/uncategorized\/","name":"Uncategorized","slug":"uncategorized","taxonomy":"category","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories\/1"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/taxonomies\/category"}],"wp:post_type":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts?categories=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}],[]]}},{"id":250,"date":"2018-06-12T06:57:45","date_gmt":"2018-06-12T06:57:45","guid":{"rendered":"https:\/\/quickbirdstudios.com\/blog\/?p=250"},"modified":"2019-07-25T12:32:03","modified_gmt":"2019-07-25T12:32:03","slug":"mvvm-in-flutter","status":"publish","type":"post","link":"https:\/\/quickbirdstudios.com\/blog\/mvvm-in-flutter\/","title":{"rendered":"App architecture: MVVM in Flutter using Dart Streams"},"content":{"rendered":"<p><img class=\"aligncenter size-large wp-image-275\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/comic_mvvm_flutter-1024x788.jpg\" alt=\"\" width=\"640\" height=\"493\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/comic_mvvm_flutter-1024x788.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/comic_mvvm_flutter-300x231.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/comic_mvvm_flutter-768x591.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/comic_mvvm_flutter-550x423.jpg 550w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>A common problem while developing apps is that you end up with over-complicated classes containing View logic as well as business logic. Both are so intertwined that it\u2019s impossible to test them independently. Code-readability suffers and future code changes are hard to implement.<br \/>\nSince there are almost no constraints to your architecture in Flutter, it&#8217;s fairly easy to run into this problem. Some developers write all of their code in the Widget until they realize the mess they produced. Reusing code in other Projects seems impossible and in the end, you write most of your code twice. MVVM tries to solve that by splitting up business logic and view details.<\/p>\n<p>In this article, we show you how MVVM with Flutter could look like. We\u2019ll create a functional reactive ViewModel using Darts Stream API.<\/p>\n<h3>MVVM<\/h3>\n<p>Before we look at any code, we should get a basic understanding of MVVM (Model-View-ViewModel). If you&#8217;re familiar with MVVM you can skip this part.<\/p>\n<p>The main goal behind MVVM is to move as much of the state and logic from the View into a separate entity called the ViewModel. The ViewModel also contains the business logic and serves as the mediator between the View and the Model.<\/p>\n<p><img class=\"wp-image-251 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/9D30D6B2-2689-4F56-B7C6-38AADDE8D51E-300x112.png\" alt=\"\" width=\"597\" height=\"223\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/9D30D6B2-2689-4F56-B7C6-38AADDE8D51E-300x112.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/9D30D6B2-2689-4F56-B7C6-38AADDE8D51E-768x287.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/9D30D6B2-2689-4F56-B7C6-38AADDE8D51E.png 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/9D30D6B2-2689-4F56-B7C6-38AADDE8D51E-550x205.png 550w\" sizes=\"(max-width: 597px) 100vw, 597px\" \/>The ViewModel has basically two responsibilities:<\/p>\n<ul>\n<li>it reacts to user inputs (e.g. by changing the model, initiating network requests or routing to different screens)<\/li>\n<li>it offers output data that the View can subscribe to<\/li>\n<\/ul>\n<p>The View, on the other hand, does not contain any business logic. These are the responsibilities of the view:<\/p>\n<ul>\n<li>it reacts to new output states of the ViewModel and renders them accordingly (e.g. by showing a String in a text field)<\/li>\n<li>it tells the ViewModel about new user inputs (e.g. button-clicks, text-changes, screen touches)<\/li>\n<\/ul>\n<p>In contrast to popular MVC approaches the Fragment\/Activity\/UIViewController does not contain business logic in MVVM. It is a humble view that simply renders the ViewModel\u2019s output states. The ViewModel does NOT KNOW the View (a difference to forms of MVP and MVC). It simply offers output states that the View observes:<\/p>\n<p><img class=\"size-medium wp-image-252 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/16FB8FD2-6D3E-4EFA-9062-2231CA34F196-300x113.png\" alt=\"\" width=\"300\" height=\"113\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/16FB8FD2-6D3E-4EFA-9062-2231CA34F196-300x113.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/16FB8FD2-6D3E-4EFA-9062-2231CA34F196-768x290.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/16FB8FD2-6D3E-4EFA-9062-2231CA34F196-550x208.png 550w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/16FB8FD2-6D3E-4EFA-9062-2231CA34F196.png 1014w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<h3>MVVM in Flutter<\/h3>\n<p>In Flutter, the Widget represents the View of MVVM. The business logic sits in a separate ViewModel-class. The ViewModel is totally platform-independent. It contains no dependencies to Flutter and can, therefore, be easily reused e.g. in a web project.<br \/>\nThat is one of MVVM\u2019s biggest powers. We can create a Mobile App and a website that both share the same ViewModel. You don&#8217;t need to reinvent and write the logic twice.<\/p>\n<h3>Example: Email Subscription Widget<\/h3>\n<p>Let\u2019s look at an example &#8211; We\u2019ll implement a Newsletter signup-form with an email textfield and a submit button. The button is disabled and the user sees an error if the email is invalid:<\/p>\n<p><img class=\"wp-image-283 size-full aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/validator_gif_cropped2-1.gif\" alt=\"\" width=\"284\" height=\"166\" \/><\/p>\n<h3>The ugly way<\/h3>\n<p>Without any specific architecture, the business logic and the current state are part of the widget. It could look something like this:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/JulianBissekkou\/7a71359b5bc8ef38b2a6c0b862639d58.js\"><\/script><\/p>\n<p>The problem is that view logic, view state, and business logic are mixed up. That leads to a few problems:<br \/>\n1. It&#8217;s hard to unit test<br \/>\n2. Other dart projects cannot reuse the business logic since it&#8217;s intertwined with Flutter-dependent View logic<br \/>\n3. This style gets messy very soon and you end up with huge Widget classes<\/p>\n<p>Let&#8217;s see how we can improve this&#8230;<\/p>\n<h3>Solution with MVVM<\/h3>\n<p>As explained above, the ViewModel has Input and Output parameters. We will add an \u201ainput\u2018 or \u201aoutput\u2018 prefix for the sake of clarity.<\/p>\n<p>All Inputs are <em>Sinks<\/em>. The View can use those to insert data into the ViewModel.<br \/>\nAll Outputs are <em>Streams<\/em>. The View can listen for changes by subscribing to the <em>Streams<\/em>. The interface for our ViewModel looks like this:<br \/>\n<script src=\"https:\/\/gist.github.com\/JulianBissekkou\/5bfa64defa66d73343ef550ec41e3e6a.js\"><\/script><\/p>\n<p>We are using a <em>StreamController<\/em> as an input <em>Sink<\/em>. This <em>StreamController<\/em> provides a stream that we can use internally to handle those input events.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/JulianBissekkou\/b9b1edc0cbfc256909b7d2e11e554c93.js\"><\/script><\/p>\n<h3>Binding a View to the ViewModel<\/h3>\n<p>So how to supply inputs and handle output events?<br \/>\nTo supply input values to the ViewModel we insert them into the ViewModel&#8217;s <em>Sinks<\/em>. We&#8217;ll bind a Widget to the ViewModel. In this case, we insert the TextField&#8217;s text whenever it changes.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/JulianBissekkou\/2bda47f4a174c900b78f0f56cf6aef07.js\"><\/script><\/p>\n<p>You listen to the ViewModel Outputs by subscribing to the Output-<em>Streams<\/em>.<\/p>\n<p>Flutter provides a really cool Widget called <em>StreamBuilder<\/em>\u00a0that will update whenever a <em>Stream<\/em> provides a new value. We won\u2019t call \u201esetState\u201c ever again!<br \/>\nThe <em>StreamBuilder<\/em>&#8216;s &#8220;<em>builder&#8221;<\/em> method gives you a snapshot whenever it builds. This snapshot contains information about the stream, its data, and\u00a0its errors. If our stream did not emit any value, &#8220;snapshot.data&#8221; will be null. So, be careful.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/JulianBissekkou\/8128191eaafc468faf430e6328f32491.js\"><\/script><\/p>\n<p>QUICK TIP: Try to help the Dart compiler when working with streams, add all the needed generic types to avoid runtime errors.<\/p>\n<p>Here you can see the whole picture:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/JulianBissekkou\/37f3ebc1a43319c68926963abd7eff6f.js\"><\/script><\/p>\n<p>As you can see, the View&#8217;s only responsibility is rendering Outputs and supplying Inputs to the ViewModel. Our Widget is therefore super slim and easy-to-read.<\/p>\n<h3>Conclusion<\/h3>\n<p>We started out with MVVM in the native world and wondered if it would also work with Flutter. After trying it out, we can say: MVVM is a great fit for Flutter as well. We love it how nicely the View-logic is separated from the business logic, how easy ViewModels can be unit-tested, and how seemingly Dart ViewModels can be shared with other platforms that are using Dart. The Stream-API takes some time to get used to but afterward, it feels very smooth. For more complicated tasks we used RxDart which adds functionality to the standard Stream-API.<\/p>\n<p>If you&#8217;re just hacking a small app, then the normal \u201cput-everything-in-one-class\u201d approach might be more straightforward. If you plan to build a bigger app though, MVVM might be the architecture for you.<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/pizza.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/mvvm-in-flutter\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/pizza.jpg\" data-pin-description=\"App architecture: MVVM in Flutter using Dart Streams\"\/>","protected":false},"excerpt":{"rendered":"<p>A common problem while developing apps is that you end up with over-complicated classes containing View logic as well as business logic. Both are so intertwined that it\u2019s impossible to test them independently. Code-readability suffers and future code changes are hard to implement. Since there are almost no constraints to your architecture in Flutter, it&#8217;s [&hellip;]<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/pizza.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/mvvm-in-flutter\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/pizza.jpg\" data-pin-description=\"App architecture: MVVM in Flutter using Dart Streams\"\/>","protected":false},"author":6,"featured_media":277,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/250"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=250"}],"version-history":[{"count":36,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/250\/revisions"}],"predecessor-version":[{"id":827,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/250\/revisions\/827"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/277"}],"wp:attachment":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]},"_embedded":{"author":[{"id":6,"name":"Julian Bissekkou","url":"","description":"","link":"https:\/\/quickbirdstudios.com\/blog\/author\/julian\/","slug":"julian","avatar_urls":{"24":"https:\/\/secure.gravatar.com\/avatar\/e5722b66a2586702d55201b2bd3bb3ad?s=24&d=mm&r=g","48":"https:\/\/secure.gravatar.com\/avatar\/e5722b66a2586702d55201b2bd3bb3ad?s=48&d=mm&r=g","96":"https:\/\/secure.gravatar.com\/avatar\/e5722b66a2586702d55201b2bd3bb3ad?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users"}]}}],"replies":[[{"id":517,"parent":0,"author":0,"author_name":"\u5c0f\u864e","author_url":"","date":"2018-10-07T13:34:14","content":{"rendered":"<p>Great help for me ! Thanks<\/p>\n"},"link":"https:\/\/quickbirdstudios.com\/blog\/mvvm-in-flutter\/#comment-517","type":"comment","author_avatar_urls":{"24":"https:\/\/secure.gravatar.com\/avatar\/1466ea64cab873a8473bce7cd742b796?s=24&d=mm&r=g","48":"https:\/\/secure.gravatar.com\/avatar\/1466ea64cab873a8473bce7cd742b796?s=48&d=mm&r=g","96":"https:\/\/secure.gravatar.com\/avatar\/1466ea64cab873a8473bce7cd742b796?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments\/517"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments"}],"up":[{"embeddable":true,"post_type":"post","href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/250"}]}}]],"wp:featuredmedia":[{"id":277,"date":"2018-06-07T16:55:43","slug":"pizza","type":"attachment","link":"https:\/\/quickbirdstudios.com\/blog\/mvvm-in-flutter\/pizza\/","title":{"rendered":"pizza"},"author":2,"caption":{"rendered":"<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/pizza.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/mvvm-in-flutter\/pizza\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/pizza.jpg\" data-pin-description=\"pizza\"\/>"},"alt_text":"","media_type":"image","mime_type":"image\/jpeg","media_details":{"width":819,"height":1019,"file":"2018\/06\/pizza.jpg","sizes":{"thumbnail":{"file":"pizza-150x150.jpg","width":150,"height":150,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/pizza-150x150.jpg"},"medium":{"file":"pizza-241x300.jpg","width":241,"height":300,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/pizza-241x300.jpg"},"medium_large":{"file":"pizza-768x956.jpg","width":768,"height":956,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/pizza-768x956.jpg"},"spatial-index":{"file":"pizza-819x560.jpg","width":819,"height":560,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/pizza-819x560.jpg"},"spatial-masonry":{"file":"pizza-550x684.jpg","width":550,"height":684,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/pizza-550x684.jpg"},"full":{"file":"pizza.jpg","width":819,"height":1019,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/pizza.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/06\/pizza.jpg","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/277"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/attachment"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=277"}]}}],"wp:term":[[{"id":1,"link":"https:\/\/quickbirdstudios.com\/blog\/category\/uncategorized\/","name":"Uncategorized","slug":"uncategorized","taxonomy":"category","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories\/1"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/taxonomies\/category"}],"wp:post_type":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts?categories=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}],[]]}},{"id":170,"date":"2018-05-08T06:26:42","date_gmt":"2018-05-08T06:26:42","guid":{"rendered":"https:\/\/quickbirdstudios.com\/blog\/?p=170"},"modified":"2019-07-25T12:31:50","modified_gmt":"2019-07-25T12:31:50","slug":"app-architecture-our-functional-mvvm-approach-with-rx","status":"publish","type":"post","link":"https:\/\/quickbirdstudios.com\/blog\/app-architecture-our-functional-mvvm-approach-with-rx\/","title":{"rendered":"App architecture: Functional MVVM with RxJava &#038; RxSwift"},"content":{"rendered":"<p>The problem with the way many people implement and explain their app architecture is something like that:<\/p>\n<p><img class=\"aligncenter size-large wp-image-210\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/ComicColourBranded-1-1024x581.jpg\" alt=\"\" width=\"640\" height=\"363\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/ComicColourBranded-1-1024x581.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/ComicColourBranded-1-300x170.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/ComicColourBranded-1-768x436.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/ComicColourBranded-1-550x312.jpg 550w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/ComicColourBranded-1.jpg 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>The Fragment or UIViewController becomes a massive class that contains business logic as well as view details. Both are so intertwined that it\u2019s impossible to test them independently. Code-readability suffers and future code changes are hard to implement.<br \/>\nMVVM tries to solve that by splitting up business logic and view details. In this article with briefly explain MVVM, but more importantly give you a glimpse of our MVVM style. We use a very functional MVVM approach with RxJava\/RxSwift and platform-independent ViewModels.<\/p>\n<h3>MVVM (Model-View-ViewModel)<\/h3>\n<p>Model-View-ViewModel (MVVM) gets more and more attention among app developers these days. I\u2019ll first give you a short explanation of MVVM in general here. If you are already familiar with it, just skip ahead to see our personal MVVM approach.<br \/>\nThe main goal behind MVVM is to move as much of the state and logic from the View into a separate entity called the ViewModel. The ViewModel also contains the business logic and serves as the mediator between the View and the Model.<\/p>\n<p><img class=\"aligncenter wp-image-197 size-large\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/MVVM_UML-1024x382.jpg\" alt=\"\" width=\"640\" height=\"239\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/MVVM_UML-1024x382.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/MVVM_UML-300x112.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/MVVM_UML-768x287.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/MVVM_UML-550x205.jpg 550w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>The ViewModel has basically two responsibilities:<\/p>\n<ol>\n<li>it reacts to user inputs (e.g. by changing the model, initiating network requests or routing to different screens)<\/li>\n<li>it offers output data that the View can subscribe to<\/li>\n<\/ol>\n<p>The View, on the other hand, does not contain any business logic. These are the responsibilities of the view:<\/p>\n<ol>\n<li>it reacts to new output states of the ViewModel and renders them accordingly (e.g. by showing a String in a text field)<\/li>\n<li>it tells the ViewModel about new user inputs (e.g. button-clicks, text-changes, screen touches)<\/li>\n<\/ol>\n<p>In contrast to popular MVC approaches the Fragment\/Activity\/UIViewController does not contain business logic in MVVM. It is a humble view that simply renders the ViewModel\u2019s output states. The ViewModel does NOT KNOW the View (a difference to forms of MVP and MVC). It simply offers output states that the View observes:<\/p>\n<h3>Our functional MVVM approach<\/h3>\n<p>Our MVVM approach has two specific characteristics.<\/p>\n<ol>\n<li><strong>Functional input-to-output mapping<\/strong><br \/>\nWe use a functional approach. An output of a ViewModel is just the result of a function applied to an input, an idea we borrowed from <a href=\"https:\/\/github.com\/kickstarter\/ios-oss\">Kickstarter<\/a>. There is almost no imperative code in our ViewModels. If we have side effects (like routing between screens), these are isolated to a dedicated function in our ViewModel.<\/li>\n<li><strong>Platform-independent ViewModels<\/strong><br \/>\nOur ViewModels don\u2019t have any reference to the Android\/iOS SDK. They are pure Kotlin\/Java\/Swift classes. All of the platform-specific logic happens in the View or encapsulated in an external class. The ViewModels are therefore easy to test and the logic can be shared between different platforms (you could easily reuse a Kotlin ViewModel in a Java Desktop application or <a href=\"https:\/\/github.com\/Kotlin\/kotlinx.html\">Kotlin Website<\/a>).<\/li>\n<\/ol>\n<h3>Implementation<\/h3>\n<p>Our ViewModels have Input properties and Output properties. The View supplies data to the input properties and observes the output properties. The \u201conly\u201d thing the ViewModel does is mapping the Inputs to Outputs in a meaningful way.<\/p>\n<p><img class=\"aligncenter size-full wp-image-195\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/eeeeee.png\" alt=\"\" width=\"1014\" height=\"383\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/eeeeee.png 1014w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/eeeeee-300x113.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/eeeeee-768x290.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/eeeeee-550x208.png 550w\" sizes=\"(max-width: 1014px) 100vw, 1014px\" \/><\/p>\n<p>The beauty of this approach lies in the functional implementation. Inputs are just mapped to outputs with a specific function. If possible, there are no side effects at all. For a certain set of inputs we will always get the exact same set of outputs. That makes it so predictable and helps to prevent bugs related to state changes.<\/p>\n<p style=\"text-align: center;\"><strong>f(input) = output<\/strong><br \/>\n<strong> f(english) = german<\/strong><\/p>\n<h3>Example: Power Translator 3000<\/h3>\n<p>Let\u2019s take a look at an example, the Power Translator 3000. This stupid little app translates English text to German text (but in real time! I mean, as you type! How great is that). We\u2019ll also add a button to copy the German translation to the clipboard.<\/p>\n<p><img class=\"aligncenter wp-image-196\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/PowerTranslator.png\" alt=\"\" width=\"534\" height=\"508\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/PowerTranslator.png 834w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/PowerTranslator-300x286.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/PowerTranslator-768x731.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/PowerTranslator-550x524.png 550w\" sizes=\"(max-width: 534px) 100vw, 534px\" \/><\/p>\n<p>Below you can see the ViewModel (left) and its inputs and outputs for the View (right). Since we use reactive streams for mapping input data to output data the whole thing really behaves like a set of connected pipes.<\/p>\n<figure id=\"attachment_198\" aria-describedby=\"caption-attachment-198\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-198 size-large\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/FunctionalMVVMpipes-1024x501.jpg\" alt=\"\" width=\"640\" height=\"313\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/FunctionalMVVMpipes-1024x501.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/FunctionalMVVMpipes-300x147.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/FunctionalMVVMpipes-768x376.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/FunctionalMVVMpipes-550x269.jpg 550w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-198\" class=\"wp-caption-text\">Mapping input to outputs: English to German text, Button clicks to &#8220;Save to clipboard&#8221; actions<\/figcaption><\/figure>\n<h3>ViewModel Implementation<\/h3>\n<p>I\u2019ll show you an implementation example on Android using Kotlin as the programming language. The ViewModel on iOS with Swift would look almost identical though.<br \/>\nLet\u2019s first take a look at the ViewModel\u2019s interface. It consists of observable Input and Output properties. We DON\u2019T have any traditional functions in our ViewModels. We use Subjects from RxJava\/RxSwift to get input and provide outputs via Observables\u2019s from RxJava\/RxSwift.\u00a0Don\u2019t worry about the Rx details if you are not familiar with it. Implementation details are secondary for now.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/maltebucksch\/66cfd2ba3b79ffc506738766d6c476be.js\"><\/script><\/p>\n<p>The outputs are implemented as a mapping from inputs using Rx-operators in the ViewModel-Implementation. That\u2019s the business logic. Here you can see how that looks like in our example.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/maltebucksch\/0abb2f1437ba801e8a9098f26c7d5a43.js\"><\/script><\/p>\n<h3>View Implementation<\/h3>\n<p>Now that we have a ViewModel let\u2019s allow the user to interact with it by providing a View. I am going to show you how to bind a Fragment (which is a View in MVVM) to a ViewModel. You can do the same with Android View classes, Android XML (via Data Binding) or iOS ViewControllers.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/maltebucksch\/c4d66caf2ff6530a7f2d6e7824726e82.js\"><\/script><\/p>\n<p>We first delegate the View\u2019s user input (English text changes &amp; save button clicks) to the ViewModel\u2019s Input properties. To make this process more convenient we wrote extension functions like receiveTextChangesFrom and receiveClicksFrom. Internally we use <a href=\"https:\/\/github.com\/JakeWharton\/RxBinding\">RxBinding<\/a> for that.<br \/>\nOn the other hand, we subscribe to the outputs. We change the displayed view accordingly whenever Outputs change (I left out the Lifecycle-management code for the sake of simplicity).<br \/>\nThat\u2019s it, that\u2019s everything we need to do in the View to get our example running. This is one of the big advantages of MVVM: Your Views (may it be Fragments, Views or ViewControllers) are super compact classes only serving the purpose of supplying input data and rendering output data.<\/p>\n<h3>Wrap-up<\/h3>\n<p>Hopefully, I managed to give you a grasp of how our MVVM approach at QuickBird Studios looks like. We are a big fan of the MVVM pattern but of course, there is no perfect architecture. This approach comes with a lot of advantages but also some disadvantages:<\/p>\n<p><strong>Advantages<\/strong><\/p>\n<ul>\n<li>scalability: we built both small as well as big, complex apps using MVVM. The separation of concerns helps a lot to be ready for future requirement changes.<\/li>\n<li>testability: the ViewModel does not have any View dependency or any other Android\/iOS SDK dependency. Nothing needs to be mocked. We can easily unit test ViewModels by providing sample inputs and asserting on the outputs. We\u2019re going to talk about this in our next article.<\/li>\n<li>predictability: side effects are isolated using this functional approach. Therefore the probability of bugs because of unpredictable internal state changes decreases.<\/li>\n<\/ul>\n<p><strong>Disadvantages<\/strong><\/p>\n<ul>\n<li>steep learning curve: it takes some time to get used to RxJava and this functional style of thinking\u00a0in the beginning<\/li>\n<li>set-up time: binding the View to the ViewModel is a lot more fun using custom extension functions or XML bindings which take some time to write (we open-sourced some of our bindings <a href=\"https:\/\/github.com\/quickbirdstudios\">here<\/a>)<\/li>\n<\/ul>\n<p>We optimized this approach over the last year by applying it to several apps. It\u2019s working really well for us. In the next articles, we\u2019ll look at the details of how to make this approach work super smoothly on Android as well as on iOS.<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/ComicColourBranded-1.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/app-architecture-our-functional-mvvm-approach-with-rx\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/ComicColourBranded-1.jpg\" data-pin-description=\"App architecture: Functional MVVM with RxJava &#038; RxSwift\"\/>","protected":false},"excerpt":{"rendered":"<p>The problem with the way many people implement and explain their app architecture is something like that: The Fragment or UIViewController becomes a massive class that contains business logic as well as view details. Both are so intertwined that it\u2019s impossible to test them independently. Code-readability suffers and future code changes are hard to implement. [&hellip;]<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/ComicColourBranded-1.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/app-architecture-our-functional-mvvm-approach-with-rx\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/ComicColourBranded-1.jpg\" data-pin-description=\"App architecture: Functional MVVM with RxJava &#038; RxSwift\"\/>","protected":false},"author":2,"featured_media":210,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/170"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=170"}],"version-history":[{"count":31,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/170\/revisions"}],"predecessor-version":[{"id":826,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/170\/revisions\/826"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/210"}],"wp:attachment":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]},"_embedded":{"author":[{"id":2,"name":"Malte Bucksch","url":"https:\/\/quickbirdstudios.com\/blog","description":"","link":"https:\/\/quickbirdstudios.com\/blog\/author\/quickbird\/","slug":"quickbird","avatar_urls":{"24":"https:\/\/secure.gravatar.com\/avatar\/dc8955c6a4bebbaffc0f99f21f757f13?s=24&d=mm&r=g","48":"https:\/\/secure.gravatar.com\/avatar\/dc8955c6a4bebbaffc0f99f21f757f13?s=48&d=mm&r=g","96":"https:\/\/secure.gravatar.com\/avatar\/dc8955c6a4bebbaffc0f99f21f757f13?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users"}]}}],"replies":[[{"id":10,"parent":0,"author":0,"author_name":"socks5 list","author_url":"http:\/\/bit.ly\/2t50md5","date":"2018-06-20T16:34:09","content":{"rendered":"<p>This is useful post ..<br \/>\nI added your web into my favourites.<br \/>\n\ud83d\ude42 Looking forward for upcoming updates!<\/p>\n<p>Best regards,<br \/>\nJames<\/p>\n"},"link":"https:\/\/quickbirdstudios.com\/blog\/app-architecture-our-functional-mvvm-approach-with-rx\/#comment-10","type":"comment","author_avatar_urls":{"24":"https:\/\/secure.gravatar.com\/avatar\/00e24832692f59573829dae338543cef?s=24&d=mm&r=g","48":"https:\/\/secure.gravatar.com\/avatar\/00e24832692f59573829dae338543cef?s=48&d=mm&r=g","96":"https:\/\/secure.gravatar.com\/avatar\/00e24832692f59573829dae338543cef?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments\/10"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments"}],"up":[{"embeddable":true,"post_type":"post","href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/170"}]}}]],"wp:featuredmedia":[{"id":210,"date":"2018-05-08T08:55:10","slug":"comiccolourbranded-2","type":"attachment","link":"https:\/\/quickbirdstudios.com\/blog\/app-architecture-our-functional-mvvm-approach-with-rx\/comiccolourbranded-2\/","title":{"rendered":"ComicColourBranded"},"author":2,"caption":{"rendered":"<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/ComicColourBranded-1.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/app-architecture-our-functional-mvvm-approach-with-rx\/comiccolourbranded-2\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/ComicColourBranded-1.jpg\" data-pin-description=\"ComicColourBranded\"\/>"},"alt_text":"","media_type":"image","mime_type":"image\/jpeg","media_details":{"width":1200,"height":681,"file":"2018\/05\/ComicColourBranded-1.jpg","sizes":{"thumbnail":{"file":"ComicColourBranded-1-150x150.jpg","width":150,"height":150,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/ComicColourBranded-1-150x150.jpg"},"medium":{"file":"ComicColourBranded-1-300x170.jpg","width":300,"height":170,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/ComicColourBranded-1-300x170.jpg"},"medium_large":{"file":"ComicColourBranded-1-768x436.jpg","width":768,"height":436,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/ComicColourBranded-1-768x436.jpg"},"large":{"file":"ComicColourBranded-1-1024x581.jpg","width":1024,"height":581,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/ComicColourBranded-1-1024x581.jpg"},"spatial-index":{"file":"ComicColourBranded-1-840x560.jpg","width":840,"height":560,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/ComicColourBranded-1-840x560.jpg"},"spatial-masonry":{"file":"ComicColourBranded-1-550x312.jpg","width":550,"height":312,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/ComicColourBranded-1-550x312.jpg"},"full":{"file":"ComicColourBranded-1.jpg","width":1200,"height":681,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/ComicColourBranded-1.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1","keywords":[]}},"source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/05\/ComicColourBranded-1.jpg","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/210"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/attachment"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=210"}]}}],"wp:term":[[{"id":1,"link":"https:\/\/quickbirdstudios.com\/blog\/category\/uncategorized\/","name":"Uncategorized","slug":"uncategorized","taxonomy":"category","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories\/1"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/taxonomies\/category"}],"wp:post_type":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts?categories=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}],[]]}},{"id":34,"date":"2018-03-29T06:57:24","date_gmt":"2018-03-29T06:57:24","guid":{"rendered":"https:\/\/quickbirdstudios.com\/blog\/?p=34"},"modified":"2019-07-25T12:31:21","modified_gmt":"2019-07-25T12:31:21","slug":"testing-mobile-apps-an-overview","status":"publish","type":"post","link":"https:\/\/quickbirdstudios.com\/blog\/testing-mobile-apps-an-overview\/","title":{"rendered":"Testing Mobile Apps"},"content":{"rendered":"<p>Like any piece of software, mobile apps need to be tested to make sure they work correctly. Otherwise, your app might crash on your user\u2019s devices or has other bugs. You get bad ratings, people uninstall your app. You lost the race faster than you can say Jack Robinson.<br \/>\nIn this article, we cover the four fundamental layers of testing software. We show you how they apply to mobile apps, which tools and libraries we at QuickBird Studios use for testing and key learnings we had along the way.<\/p>\n<h3>Why should you especially test apps?<\/h3>\n<p>You usually release your app to thousands of different device types. They all differ in screen resolution, hardware specs, supported sensors and OS version. Many things can go wrong on mobile phones that you need to test against. What happens if you want to send a video to a friend but you lose your internet connection in the middle of the process? What if you want to download a file but your storage space is full? These situations should be tested.<br \/>\nIt is one tap for a user to uninstall your app and two more taps to leave a bad 1-star rating. So you better make sure your app runs smoothly. In comparison to desktop applications, the mobile app market is less forgiving. Users do not download apps that receive too many bad ratings. If your app crashes and gets uninstalled you even get pushed down in the store\u2019s search ranking.<\/p>\n<figure id=\"attachment_37\" aria-describedby=\"caption-attachment-37\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-37 size-large\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/fragmentation-1024x598.png\" alt=\"\" width=\"640\" height=\"374\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/fragmentation-1024x598.png 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/fragmentation-300x175.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/fragmentation-768x449.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/fragmentation-550x321.png 550w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/fragmentation.png 1280w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-37\" class=\"wp-caption-text\">Android Device Fragmentation 2014 \u2013 18796 devices in use (<a href=\"https:\/\/www.slashgear.com\/android-fragmentation-charted-18796-different-devices-in-use-21342276\/\">source<\/a>)<\/figcaption><\/figure>\n<h3>Layers of testing<\/h3>\n<p>We\u2019ll use the 101 testing pyramid to describe our testing approaches and tools. At the basis of your apps should be a large suite of automated unit tests that make sure each unit of your app works correctly. On top of that is usually a layer of integration tests for checking the interplay between your app\u2019s components. In the end, you also need to test the user interface with automated and manual UI tests.<br \/>\nAs a rule of thumb: You should have way more unit- and integrations tests than UI tests. UI tests are slower and less robust than integration tests which are slower and less robust than unit tests. The pyramid should not transform into an ice cream cone where people end up testing everything manually. We&#8217;ll take a closer look now at each of the layers. Let&#8217;s start with the tip of the iceberg, UI tests.<\/p>\n<figure id=\"attachment_50\" aria-describedby=\"caption-attachment-50\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-50 size-large\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/layerstesting-1024x620.png\" alt=\"\" width=\"640\" height=\"388\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/layerstesting-1024x620.png 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/layerstesting-300x182.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/layerstesting-768x465.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/layerstesting-550x333.png 550w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/layerstesting.png 1068w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-50\" class=\"wp-caption-text\">Layers of testing &#8211; Pyramid vs Ice Cream Cone (<a href=\"https:\/\/medium.com\/@fistsOfReason\/testing-is-good-pyramids-are-bad-ice-cream-cones-are-the-worst-ad94b9b2f05f\">source<\/a>)<\/figcaption><\/figure>\n<h3>UI tests<\/h3>\n<p>There are two UI testing approaches: Manual UI testing and automatic UI testing. Manual UI testing is done by a human who is tapping through your app. Automatic UI testing tries to automate these repetitive tasks as much as possible by letting a software tap through your app. The goal is to find bugs and crash scenarios without looking at the implementation of your app.<\/p>\n<h3>Manual UI testing<\/h3>\n<p>Manual UI testing should ideally be done by the developer and one or more external testers. The developer takes care of finding the obvious bugs and crashes from his technical point of view. External testers usually have a different view angle and find issues the developer didn\u2019t (want to) think about. For a developer, finding bugs often means shame and more work. Finding a bug as an external tester means a pat on the back. He is motivated to find bugs.<\/p>\n<p>Many tools on Android and iOS make the testers\u2019 life easier. Testers can, for example, find performance issues by enabling a CPU consumption graph on top of the screen. If they click on a button and the CPU graph jumps up there is likely to be a heavy operation going on in the background.<br \/>\nAs another example, using the layout bounds view developers can display an overlay with the bounds of every visible UI element.<\/p>\n<figure id=\"attachment_96\" aria-describedby=\"caption-attachment-96\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-96 size-large\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/tools-1024x613.jpg\" alt=\"\" width=\"640\" height=\"383\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/tools-1024x613.jpg 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/tools-300x180.jpg 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/tools-768x460.jpg 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/tools-550x329.jpg 550w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-96\" class=\"wp-caption-text\">Layout Bounds View and Performance Graph View<\/figcaption><\/figure>\n<picture> Manual testing is also the best way to detect problems with e.g. localization\/translation of your app. If your app looks great on English devices: DON\u2019T assume it also looks great on German devices. Beautiful English words like \u201cbutterfly\u201d mutate to long, harsh German words like \u201cSchmetterling\u201d. <\/picture>\n<figure id=\"attachment_49\" aria-describedby=\"caption-attachment-49\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-49 size-large\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/translationapp-1024x582.png\" alt=\"\" width=\"640\" height=\"364\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/translationapp-1024x582.png 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/translationapp-300x171.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/translationapp-768x437.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/translationapp-550x313.png 550w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-49\" class=\"wp-caption-text\">Translation of English to German<\/figcaption><\/figure>\n<h3>Automated UI testing<\/h3>\n<p>Automatic UI tests can be divided into:<\/p>\n<ul>\n<li>Predefined UI tests: You define beforehand which buttons should be pressed, which texts should be typed, in which order this should happen and what you expect as the result<\/li>\n<li>Robotic UI tests: A robot software taps \u201crandomly\u201d through your app without any advice from your side.<\/li>\n<\/ul>\n<p>Automated UI tests are especially great for mobile app testing because of the sheer number of different devices. You can run UI tests on multiple devices at the same time just by clicking a button. With services like the Amazon Device Farm you have access to hundreds of phones in the cloud that are just waiting for your UI tests to run. You don\u2019t even need to buy them anymore. If any device causes a problem you can find that out in a few minutes. Good luck trying that manually!<\/p>\n<h4><strong>Predefined UI tests<\/strong><\/h4>\n<h4>You will usually use predefined UI tests since you have full control over them and you can define expected outcomes for certain actions. Espresso is an example of a UI testing framework for Android Apps. Using Espresso you can e.g. test that your note app can create notes and that these notes get saved and displayed correctly. Here is a code snippet which does just that:<\/h4>\n<p>[java]<br \/>\n@Test<br \/>\npublic void testAddNote() {<br \/>\n    \/\/ press \u201cadd note\u201d button<br \/>\n    onView(withId(R.id.addNote)).perform(click());<br \/>\n    \/\/ type \u201cEspresso rules\u201d as the note content<br \/>\n    onView(withId(R.id.noteContent)).perform(typeText(&quot;Espresso rules&quot;));<br \/>\n    \/\/ press \u201cok\/save\u201d button<br \/>\n    onView(withId(R.id.ok)).perform(click());<br \/>\n    \/\/ check if note-list contains note with the text \u201cEspresso rules&quot;<br \/>\n    onView(withText(&quot;Espresso rules&quot;)).check(matches(isDisplayed()));<br \/>\n}<br \/>\n[\/java]<\/p>\n<h4>If you are lazy and you don\u2019t want to write any code you can even use the Espresso Test Recorder. It allows you to record and playback actions in your app and writes the code for you. Here is a video showing the Espresso Test Recorder for a note app:<\/h4>\n<p><iframe src=\"https:\/\/www.youtube.com\/embed\/v3TOmUlnVbE?rel=0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><br \/>\nTools like the Espresso Test Recorder seem like the perfect solution for writing tests without needing to code. Unfortunately, the generated code is far from perfect. It works, but only at that exact state of the application. Once the underlying code basis changes the code will often break. It makes sense to use Test Recorders as a start and refactor the generated code to make it flexible and readable.<\/p>\n<h4><strong>Robotic UI tests<\/strong><\/h4>\n<p>One prominent example of robotic UI testing is the Android Prelaunch Report. Once you upload your Android App to the Play Store Beta phase an intelligent robot taps through your app on 10-20 different devices. After about two minutes of automatic tapping, you get a video, screenshots, and crash reports. Zero work for you, and it often can detect rare problems on devices you haven\u2019t tested your app on. A word of caution though: You should not rely on the Prelaunch Report to find your app\u2019s bugs and crashes. Since you don\u2019t have an influence on it, it is a bit of a gamble.<\/p>\n<p>Here is an example of what the\u00a0Android Prelaunch Report supplies you with:<br \/>\n<iframe src=\"https:\/\/player.vimeo.com\/video\/262345112?title=0&amp;byline=0&amp;portrait=0\" width=\"640\" height=\"439\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h3>Unit tests and integration tests<\/h3>\n<p>Unit tests and integration tests evaluate the actual implementation of your app. They are written by the developers. On Android and iOS there are two types of tests:<\/p>\n<p>\u2022 On-device tests: They execute on the phone (e.g. Android\u2019s instrumented tests). That gives them access to all parts of the mobile app\u2019s SDK including sensors, the mobile database or Bluetooth.<br \/>\n\u2022 Local tests: They execute on your computer and cannot access the app\u2019s SDK. Local tests are written in pure Java\/Kotlin\/Swift and only test the platform independent logic.<\/p>\n<p>Because of the big dependency on the app SDK on-device tests are more likely to be flaky than unit tests. Even if the code basis stays the same they are not guaranteed to provide the same results on each run. If for example, the phone goes offline then the server request tests will fail even though they still passed one minute ago. If an on-device test fails it does not necessarily mean that something with your application is wrong.<\/p>\n<p>On-device tests are also slower than local tests since the tests need to be deployed to the phone to execute them.<br \/>\nLocal tests are the fastest category of tests and should optimally go through in a matter of seconds. Therefore, developers can execute local tests even after small changes to the app. That becomes valuable when you are restructuring\/refactoring your app. You execute the unit tests after each change and know immediately when something stops working.<br \/>\nGenerally, dependencies that could make your test slow or flaky should be mocked in tests. Instead of talking to a real database you mock it with a fake one whose behavior you can predict.<\/p>\n<p><img class=\"size-full wp-image-54 aligncenter\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/mocking.png\" alt=\"\" width=\"600\" height=\"385\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/mocking.png 600w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/mocking-300x193.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/mocking-550x353.png 550w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>A word about the execution speed of tests: One might say a test suite execution time of 1min instead of 10sec is not that much of a difference. However, the subtle difference has a big impact. A slow suite of tests is much less likely to get executed often than a suite of fast tests. Developers should run their test suites as often as possible to find errors when they appear first and are still easy to fix.<\/p>\n<h3>Integration tests<\/h3>\n<p>While unit tests make sure that each of your module itself works as expected integration tests assert that the combination of app modules works correctly. This could be code modules or the communication of your local app with the backend-server module.<\/p>\n<p><img class=\"aligncenter wp-image-55 size-large\" src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/integrationtesting-1024x439.png\" alt=\"\" width=\"640\" height=\"274\" srcset=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/integrationtesting-1024x439.png 1024w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/integrationtesting-300x129.png 300w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/integrationtesting-768x329.png 768w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/integrationtesting-550x236.png 550w, https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/integrationtesting.png 1380w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><br \/>\nModule combinations may result in different behavior because of combinations of data that are not exercised during unit testing. They reveal errors that appear even though all modules itself seem to work correctly.<br \/>\nIntegration tests are especially useful for mobile apps due to the number of external factors like the internet, Bluetooth, databases, and device capabilities. We write integration tests e.g. for the communication of our app with the mobile database or an external web-server. They alarm us when an interface e.g. to an external Web API changes and also provide a great documentation on how to use the interfaces of certain modules.<\/p>\n<h3>Unit tests<\/h3>\n<p>Unit tests form the basis of all of your testing. A unit test tests one isolated unit of logic in your application. Theoretically, if you tested all units of your app and then tested their interplay with integration tests you can be sure that your app will work correctly. Unit tests can run locally on your computer and\u00a0therefore are fast in their execution. Unit tests also give you peace of mind during development. Know that moment when you change your app&#8217;s code and afterward\u00a0you worry if everything will still work as it did before? With a suite of unit tests, whenever you change something, you can just run all tests. If you have enough tests, you will see a test failure if you broke the app, or a nice green bar if your app is fine.<\/p>\n<p>Unit tests are especially useful to test edge cases which are hard to trigger manually. Let\u2019s say your lovely online shop sends the one-millionth customer a special voucher. You don\u2019t want to wait for that to test if the voucher delivery actually works. With unit tests, you can simply mock the situation of you just getting your one-millionth customer (hurray!).<br \/>\nSo let\u2019s test just everything in the app with unit tests, right?!<br \/>\nNot so fast. It is still time-consuming to write tests. Also, adapting your architecture to be unit testable can make the code less readable and overly modular. We think one needs to be pragmatic while writing unit tests. There is no all-in or nothing approach. The solution lies somewhere in the middle. You should focus on the edge cases and the dangerous areas of your app. Testing that 1+1=2 is overengineering and slows you down.<\/p>\n<h3>Conclusion<\/h3>\n<p>There are differences in the toolset and focus of testing mobile apps in comparison to other systems like backend-servers or computer software. Yet, the same principles apply. Write a large basis of unit and integration test, automate UI testing as much as possible, and test manually as much as needed.<br \/>\nTesting can even accelerate projects a lot by detecting bugs early when they are still easy to fix. It is also important to use different layers of testing to find different types of problems. This makes sure you ship stable applications that get 5-star ratings in the store.<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/layerstesting_not.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/testing-mobile-apps-an-overview\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/layerstesting_not.jpg\" data-pin-description=\"Testing Mobile Apps\"\/>","protected":false},"excerpt":{"rendered":"<p>Like any piece of software, mobile apps need to be tested to make sure they work correctly. Otherwise, your app might crash on your user\u2019s devices or has other bugs. You get bad ratings, people uninstall your app. You lost the race faster than you can say Jack Robinson. In this article, we cover the [&hellip;]<\/p>\n<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/layerstesting_not.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/testing-mobile-apps-an-overview\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/layerstesting_not.jpg\" data-pin-description=\"Testing Mobile Apps\"\/>","protected":false},"author":2,"featured_media":160,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/34"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=34"}],"version-history":[{"count":42,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/34\/revisions"}],"predecessor-version":[{"id":825,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts\/34\/revisions\/825"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/160"}],"wp:attachment":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=34"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=34"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]},"_embedded":{"author":[{"id":2,"name":"Malte Bucksch","url":"https:\/\/quickbirdstudios.com\/blog","description":"","link":"https:\/\/quickbirdstudios.com\/blog\/author\/quickbird\/","slug":"quickbird","avatar_urls":{"24":"https:\/\/secure.gravatar.com\/avatar\/dc8955c6a4bebbaffc0f99f21f757f13?s=24&d=mm&r=g","48":"https:\/\/secure.gravatar.com\/avatar\/dc8955c6a4bebbaffc0f99f21f757f13?s=48&d=mm&r=g","96":"https:\/\/secure.gravatar.com\/avatar\/dc8955c6a4bebbaffc0f99f21f757f13?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users"}]}}],"wp:featuredmedia":[{"id":160,"date":"2018-03-29T06:22:20","slug":"layerstesting_not","type":"attachment","link":"https:\/\/quickbirdstudios.com\/blog\/testing-mobile-apps-an-overview\/layerstesting_not\/","title":{"rendered":"layerstesting_not"},"author":2,"caption":{"rendered":"<img src=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/layerstesting_not.jpg\" class=\"ss-hidden-pin-image\" data-pin-url=\"https:\/\/quickbirdstudios.com\/blog\/testing-mobile-apps-an-overview\/layerstesting_not\/\" data-pin-media=\"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/layerstesting_not.jpg\" data-pin-description=\"layerstesting_not\"\/>"},"alt_text":"","media_type":"image","mime_type":"image\/jpeg","media_details":{"width":1338,"height":647,"file":"2018\/03\/layerstesting_not.jpg","sizes":{"thumbnail":{"file":"layerstesting_not-150x150.jpg","width":150,"height":150,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/layerstesting_not-150x150.jpg"},"medium":{"file":"layerstesting_not-300x145.jpg","width":300,"height":145,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/layerstesting_not-300x145.jpg"},"medium_large":{"file":"layerstesting_not-768x371.jpg","width":768,"height":371,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/layerstesting_not-768x371.jpg"},"large":{"file":"layerstesting_not-1024x495.jpg","width":1024,"height":495,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/layerstesting_not-1024x495.jpg"},"spatial-index":{"file":"layerstesting_not-840x560.jpg","width":840,"height":560,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/layerstesting_not-840x560.jpg"},"spatial-masonry":{"file":"layerstesting_not-550x266.jpg","width":550,"height":266,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/layerstesting_not-550x266.jpg"},"full":{"file":"layerstesting_not.jpg","width":1338,"height":647,"mime_type":"image\/jpeg","source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/layerstesting_not.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1","keywords":[]}},"source_url":"https:\/\/quickbirdstudios.com\/blog\/wp-content\/uploads\/2018\/03\/layerstesting_not.jpg","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media\/160"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/media"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/types\/attachment"}],"author":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=160"}]}}],"wp:term":[[{"id":1,"link":"https:\/\/quickbirdstudios.com\/blog\/category\/uncategorized\/","name":"Uncategorized","slug":"uncategorized","taxonomy":"category","_links":{"self":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories\/1"}],"collection":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/categories"}],"about":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/taxonomies\/category"}],"wp:post_type":[{"href":"https:\/\/quickbirdstudios.com\/blog\/wp-json\/wp\/v2\/posts?categories=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}],[]]}}]
diff --git a/SwiftUITalk/Preview Content/Preview Assets.xcassets/Contents.json b/SwiftUITalk/Preview Content/Preview Assets.xcassets/Contents.json
new file mode 100644
index 0000000..da4a164
--- /dev/null
+++ b/SwiftUITalk/Preview Content/Preview Assets.xcassets/Contents.json	
@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SwiftUITalk/SceneDelegate.swift b/SwiftUITalk/SceneDelegate.swift
new file mode 100644
index 0000000..f2c35d2
--- /dev/null
+++ b/SwiftUITalk/SceneDelegate.swift
@@ -0,0 +1,64 @@
+//
+//  SceneDelegate.swift
+//  SwiftUITalk
+//
+//  Created by Stefan Kofler on 09.10.19.
+//  Copyright © 2019 QuickBird Studios GmbH. All rights reserved.
+//
+
+import UIKit
+import SwiftUI
+
+class SceneDelegate: UIResponder, UIWindowSceneDelegate {
+
+    var window: UIWindow?
+
+
+    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
+        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
+        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
+        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
+
+        // Create the SwiftUI view that provides the window contents.
+        let contentView = LoginView()
+
+        // Use a UIHostingController as window root view controller.
+        if let windowScene = scene as? UIWindowScene {
+            let window = UIWindow(windowScene: windowScene)
+            window.rootViewController = UIHostingController(rootView: contentView)
+            self.window = window
+            window.makeKeyAndVisible()
+        }
+    }
+
+    func sceneDidDisconnect(_ scene: UIScene) {
+        // Called as the scene is being released by the system.
+        // This occurs shortly after the scene enters the background, or when its session is discarded.
+        // Release any resources associated with this scene that can be re-created the next time the scene connects.
+        // The scene may re-connect later, as its session was not neccessarily discarded (see `application:didDiscardSceneSessions` instead).
+    }
+
+    func sceneDidBecomeActive(_ scene: UIScene) {
+        // Called when the scene has moved from an inactive state to an active state.
+        // Use this method to restart any tasks that were paused (or not yet started) when the scene was inactive.
+    }
+
+    func sceneWillResignActive(_ scene: UIScene) {
+        // Called when the scene will move from an active state to an inactive state.
+        // This may occur due to temporary interruptions (ex. an incoming phone call).
+    }
+
+    func sceneWillEnterForeground(_ scene: UIScene) {
+        // Called as the scene transitions from the background to the foreground.
+        // Use this method to undo the changes made on entering the background.
+    }
+
+    func sceneDidEnterBackground(_ scene: UIScene) {
+        // Called as the scene transitions from the foreground to the background.
+        // Use this method to save data, release shared resources, and store enough scene-specific state information
+        // to restore the scene back to its current state.
+    }
+
+
+}
+
diff --git a/SwiftUITalk/Services/DataService.swift b/SwiftUITalk/Services/DataService.swift
new file mode 100644
index 0000000..e7fae17
--- /dev/null
+++ b/SwiftUITalk/Services/DataService.swift
@@ -0,0 +1,32 @@
+//
+//  DataService.swift
+//  SwiftUITalk
+//
+//  Created by Stefan Kofler on 24.09.19.
+//  Copyright © 2019 QuickBird Studios GmbH. All rights reserved.
+//
+
+import Foundation
+import UIKit
+
+class DataService {
+
+    func getPosts() -> [Post] {
+        let postsURL = Bundle.main.url(forResource: "Posts", withExtension: "json")!
+
+        let dateFormatter = DateFormatter()
+        dateFormatter.dateFormat = "yyyy-MM-dd'T'HH:mm:ss"
+
+        let jsonDecoder = JSONDecoder()
+        jsonDecoder.dateDecodingStrategy = .formatted(dateFormatter)
+
+        let postsData = try! Data(contentsOf: postsURL)
+        return try! jsonDecoder.decode([Post].self, from: postsData)
+    }
+
+    func getDistinctAuthors() -> [Author] {
+        let authors = getPosts().map { $0.author }
+        return Array(Set(authors)).filter { $0.id != 10 }
+    }
+
+}
diff --git a/SwiftUITalk/Views/AuthorView.swift b/SwiftUITalk/Views/AuthorView.swift
new file mode 100644
index 0000000..f276c59
--- /dev/null
+++ b/SwiftUITalk/Views/AuthorView.swift
@@ -0,0 +1,37 @@
+//
+//  AuthorView.swift
+//  SwiftUITalk
+//
+//  Created by Stefan Kofler on 10.10.19.
+//  Copyright © 2019 QuickBird Studios GmbH. All rights reserved.
+//
+
+import SwiftUI
+
+struct AuthorView: View {
+    let author: Author
+
+    var body: some View {
+        VStack(spacing: 24) {
+            Image(uiImage: author.image)
+                .resizable()
+                .scaledToFit()
+                .mask(Circle())
+                .shadow(radius: 12)
+
+            Text(author.name)
+                .font(.title)
+
+            Text(author.longDescription)
+                .font(.caption)
+                .multilineTextAlignment(.center)
+        }
+        .padding(.horizontal, 32)
+    }
+}
+
+struct AuthorView_Previews: PreviewProvider {
+    static var previews: some View {
+        AuthorView(author: DataService().getDistinctAuthors()[0])
+    }
+}
diff --git a/SwiftUITalk/Views/AuthorsGridView.swift b/SwiftUITalk/Views/AuthorsGridView.swift
new file mode 100644
index 0000000..8775793
--- /dev/null
+++ b/SwiftUITalk/Views/AuthorsGridView.swift
@@ -0,0 +1,49 @@
+//
+//  AuthorsGridView.swift
+//  SwiftUITalk
+//
+//  Created by Stefan Kofler on 10.10.19.
+//  Copyright © 2019 QuickBird Studios GmbH. All rights reserved.
+//
+
+import SwiftUI
+import UIKit
+
+struct AuthorsGridView: View {
+    let authors: [Author]
+
+    @State var isDragging: Bool = false
+    @State var dragOffset: CGSize = .zero
+
+    var body: some View {
+        ZStack(alignment: .bottom) {
+            ForEach(0 ..< self.authors.count) { index in
+                AuthorCardView(author: self.authors[index])
+            }
+        }
+    }
+}
+
+struct AuthorCardView: View {
+    let author: Author
+
+    var body: some View {
+        Image(uiImage: author.image)
+            .resizable()
+            .scaledToFit()
+            .frame(width: 200)
+            .mask(RoundedRectangle(cornerRadius: 20))
+            .shadow(radius: 8)
+    }
+
+}
+
+struct AuthorsGridView_Previews: PreviewProvider {
+    static var previews: some View {
+        let authors = DataService().getPosts().map { $0.author }
+        let distinctAuthors = Array(Set(authors))
+            .filter { $0.id != 10 }
+            .sorted(by: { $0.id > $1.id })
+        return AuthorsGridView(authors: distinctAuthors)
+    }
+}
diff --git a/SwiftUITalk/Views/BlogListView.swift b/SwiftUITalk/Views/BlogListView.swift
new file mode 100644
index 0000000..771119d
--- /dev/null
+++ b/SwiftUITalk/Views/BlogListView.swift
@@ -0,0 +1,43 @@
+//
+//  BlogListView.swift
+//  SwiftUITalk
+//
+//  Created by Stefan Kofler on 10.10.19.
+//  Copyright © 2019 QuickBird Studios GmbH. All rights reserved.
+//
+
+import SwiftUI
+
+struct BlogListView: View {
+    let posts: [Post]
+
+    var body: some View {
+        List(posts) { post in
+            NavigationLink(destination: PostDetailView(post: post)) {
+                PostCell(post: post)
+            }
+        }
+        .navigationBarTitle("Posts")
+    }
+}
+
+struct PostCell: View {
+    let post: Post
+
+    var body: some View {
+        VStack(spacing: 8) {
+            Image(uiImage: post.header)
+                .resizable()
+                .scaledToFit()
+                .frame(minWidth: 0, maxWidth: .infinity)
+
+        }.padding(.vertical, 16)
+    }
+
+}
+
+struct BlogListView_Previews: PreviewProvider {
+    static var previews: some View {
+        BlogListView(posts: DataService().getPosts())
+    }
+}
diff --git a/SwiftUITalk/Views/LoginView.swift b/SwiftUITalk/Views/LoginView.swift
new file mode 100644
index 0000000..5d6e0af
--- /dev/null
+++ b/SwiftUITalk/Views/LoginView.swift
@@ -0,0 +1,42 @@
+//
+//  ContentView.swift
+//  SwiftUITalk
+//
+//  Created by Stefan Kofler on 09.10.19.
+//  Copyright © 2019 QuickBird Studios GmbH. All rights reserved.
+//
+
+import SwiftUI
+
+struct LoginView: View {
+    @State private var username = ""
+    @State private var password = ""
+
+    var body: some View {
+        NavigationView {
+            VStack {
+                Image("qb_logo")
+                    .resizable()
+                    .scaledToFit()
+                    .frame(height: 50)
+                    .padding(.vertical, 24)
+
+                Form {
+                    Section(header: Text("Credentials")) {
+                        TextField("Username", text: $username)
+                        SecureField("Password", text: $password)
+                    }
+
+                    NavigationLink("Submit", destination: BlogListView(posts: DataService().getPosts()))
+                        .disabled(username.isEmpty || password.isEmpty)
+                }.navigationBarTitle("Login", displayMode: .inline)
+            }.background(Color(.systemGroupedBackground))
+        }
+    }
+}
+
+struct ContentView_Previews: PreviewProvider {
+    static var previews: some View {
+        LoginView()
+    }
+}
diff --git a/SwiftUITalk/Views/PostDetailView.swift b/SwiftUITalk/Views/PostDetailView.swift
new file mode 100644
index 0000000..ac753fc
--- /dev/null
+++ b/SwiftUITalk/Views/PostDetailView.swift
@@ -0,0 +1,27 @@
+//
+//  PostDetailView.swift
+//  SwiftUITalk
+//
+//  Created by Stefan Kofler on 10.10.19.
+//  Copyright © 2019 QuickBird Studios GmbH. All rights reserved.
+//
+
+import SwiftUI
+
+struct PostDetailView: View {
+    let post: Post
+
+    var body: some View {
+        WebView(htmlString: post.prettyHTML, baseURL: URL(string: "https://quickbirdstudios.com/blog"))
+            .edgesIgnoringSafeArea([.bottom, .top])
+    }
+
+}
+
+struct PostDetailView_Previews: PreviewProvider {
+    static var previews: some View {
+        NavigationView {
+            PostDetailView(post: DataService().getPosts().first!)
+        }
+    }
+}
diff --git a/SwiftUITalk/Views/WebView.swift b/SwiftUITalk/Views/WebView.swift
new file mode 100644
index 0000000..9450a5b
--- /dev/null
+++ b/SwiftUITalk/Views/WebView.swift
@@ -0,0 +1,32 @@
+//
+//  WebView.swift
+//  SwiftUITalk
+//
+//  Created by Stefan Kofler on 10.10.19.
+//  Copyright © 2019 QuickBird Studios GmbH. All rights reserved.
+//
+
+import SwiftUI
+import UIKit
+import WebKit
+
+struct WebView: UIViewRepresentable {
+    typealias UIViewType = WKWebView
+
+    let htmlString: String
+    let baseURL: URL?
+
+    func makeUIView(context: UIViewRepresentableContext<WebView>) -> WKWebView {
+        WKWebView()
+    }
+
+    func updateUIView(_ uiView: WKWebView, context: UIViewRepresentableContext<WebView>) {
+        uiView.loadHTMLString(htmlString, baseURL: baseURL)
+    }
+}
+
+struct WebView_Previews: PreviewProvider {
+    static var previews: some View {
+        WebView(htmlString: "<span>Hello World</span>", baseURL: nil)
+    }
+}
diff --git a/SwiftUITalk/index.html b/SwiftUITalk/index.html
new file mode 100644
index 0000000..071e02c
--- /dev/null
+++ b/SwiftUITalk/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en-US" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="profile" href="http://gmpg.org/xfn/11">
+
+<link rel='dns-prefetch' href='//fonts.googleapis.com'/>
+<link rel='dns-prefetch' href='//s.w.org'/>
+<link rel="alternate" type="application/rss+xml" title="QuickBird Studios Blog &raquo; Feed" href="https://quickbirdstudios.com/blog/feed/"/>
+<link rel="alternate" type="application/rss+xml" title="QuickBird Studios Blog &raquo; Comments Feed" href="https://quickbirdstudios.com/blog/comments/feed/"/>
+<link rel="alternate" type="application/rss+xml" title="QuickBird Studios Blog &raquo; I hated Gradle! Kotlin and the buildSrc Plugin made me love it Comments Feed" href="https://quickbirdstudios.com/blog/gradle-kotlin-buildsrc-plugin-android/feed/"/>
+    <link rel='stylesheet' id='wp-block-library-css' href='https://quickbirdstudios.com/blog/wp-includes/css/dist/block-library/style.min.css,qver=5.2.3.pagespeed.ce.N1vWXWD_PI.css' type='text/css' media='all'/>
+<link rel='stylesheet' id='google-fonts-css' href='https://fonts.googleapis.com/css?family=Lato%3A400%2C500%2C600%2C700&#038;ver=2.2.3' type='text/css' media='all'/>
+<link rel='stylesheet' id='child-style-css' href='https://quickbirdstudios.com/blog/wp-content/themes/responsive-childtheme-master/style.css?ver=5.2.3' type='text/css' media='all'/>
+<link rel='stylesheet' id='spatial-style-css' href='https://quickbirdstudios.com/blog/wp-content/themes/responsive-childtheme-master/style.css?ver=5.2.3' type='text/css' media='all'/>
+<link rel='stylesheet' id='genericons-css' href='https://quickbirdstudios.com/blog/wp-content/themes/spatial/fonts/genericons.css' type='text/css' media='all'/>
+<link rel='stylesheet' id='spatial-fonts-css' href='https://fonts.googleapis.com/css?family=Roboto%3A300%2C400%2C400italic%2C700%2C700italic&#038;subset=latin%2Clatin-ext' type='text/css' media='all'/>
+<link rel='https://api.w.org/' href='https://quickbirdstudios.com/blog/wp-json/'/>
+<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://quickbirdstudios.com/blog/xmlrpc.php?rsd"/>
+<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://quickbirdstudios.com/blog/wp-includes/wlwmanifest.xml"/>
+<meta name="generator" content="WordPress 5.2.3"/>
+<link rel='shortlink' href='https://quickbirdstudios.com/blog/?p=864'/>
+<link rel="alternate" type="application/json+oembed" href="https://quickbirdstudios.com/blog/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fquickbirdstudios.com%2Fblog%2Fgradle-kotlin-buildsrc-plugin-android%2F"/>
+<link rel="alternate" type="text/xml+oembed" href="https://quickbirdstudios.com/blog/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fquickbirdstudios.com%2Fblog%2Fgradle-kotlin-buildsrc-plugin-android%2F&#038;format=xml"/>
+<!-- start Simple Custom CSS and JS -->
+<style type="text/css">.code-inline{background-color:#eee}code{background-color:#eee}</style>
+<!-- end Simple Custom CSS and JS -->
+          <style>.has-post-thumbnail img.wp-post-image,.attachment-twentyseventeen-featured-image.wp-post-image{display:none!important}</style><style type="text/css"></style><link rel="pingback" href="https://quickbirdstudios.com/blog/xmlrpc.php"><style type="text/css" id="custom-background-css">body.custom-background{background-color:#fff}</style>
+    <link rel="icon" href="https://quickbirdstudios.com/blog/wp-content/uploads/2018/02/favicon-1.png" sizes="32x32"/>
+<link rel="icon" href="https://quickbirdstudios.com/blog/wp-content/uploads/2018/02/favicon-1.png" sizes="192x192"/>
+<link rel="apple-touch-icon-precomposed" href="https://quickbirdstudios.com/blog/wp-content/uploads/2018/02/favicon-1.png"/>
+<meta name="msapplication-TileImage" content="https://quickbirdstudios.com/blog/wp-content/uploads/2018/02/favicon-1.png"/>
+        <style type="text/css" id="wp-custom-css">#masthead>div.nav-toggles>form{display:none!important}@media (min-width:1001px){.nav-toggles{display:none!important}div.site-branding>a.custom-logo-link{display:none}}.nav-toggles{}@media (max-width:1000px){#masthead > div.site-branding > div > div:nth-child(2), #masthead > div.site-branding > div > div:nth-child(3), #masthead > div.site-branding > div > div:nth-child(1){display:none!important}#masthead > div.site-branding > div > div:nth-child(2){display:none!important}.footer-widget-area:nth-child(1):nth-last-child(3), .footer-widget-area:nth-child(2):nth-last-child(2), .footer-widget-area:nth-child(3):nth-last-child(1) {width:100%!important}#colophon > div.footer-wrap > div > div:nth-child(2) {padding-left:unset}}@media (max-width:1350px){#masthead > div.site-branding > div > div:nth-child(2){display:none!important}.footer-widget-area:nth-child(1):nth-last-child(3), .footer-widget-area:nth-child(2):nth-last-child(2), .footer-widget-area:nth-child(3):nth-last-child(1) {width:50%}}#masthead>div.site-branding>a>img{padding-top:20px}</style>
+
+</head>
+
+<body class="post-template-default single single-post postid-864 single-format-standard custom-background wp-custom-logo group-blog">
+<div id="page" class="site">
+    <div class="site-inner">
+        <a class="skip-link screen-reader-text" href="#content">Skip to content</a>
+
+        <div id="content" class="site-content">
+
+    <div id="primary" class="content-area">
+        <main id="main" class="site-main" role="main">
+
+
+<article id="post-864" class="post-864 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized">
+    <div class="entry-content">
+        <div id="pryc-wp-acctp-original-content">$PLACEHOLDER$</div>
+    </div>
+</article><!-- #post-## -->
+
+        </main><!-- #main -->
+    </div><!-- #primary -->
+        </div><!-- #content -->
+        <!-- #colophon -->
+    </div><!-- .site-inner -->
+</div><!-- #page -->
+
+</body>
+</html>