From a brief book on iOS client, talk about the detailed design of Hybrid solution

As an iOS developer, you’re already sensitive to the fact that you’re working on more than just Native, because solutions like Hybrid apps and ReactNative are more than just concepts, More and more companies are starting their own Hybrid solutions and ReactNative localization efforts.

One, the introduction

There are plenty of good articles on the concepts, and you should already have some understanding of how the solution works. In this article, I’ll explore the technical details of Hybrid solutions using the features of the Simple iOS client. The purpose of this article is to introduce you to the Hybrid solution with a specific project, the familiar Simple book client, and then implement it yourself.

From now on, instead of focusing on one feature, you need to look at things from the perspective of a client architect.

Second, we use the simple book client features

1. Analysis of interface composition

• The main character of this article is the article display page of The Jane Book iOS client. This is the display page of one of my articles:
  

  

• As you can see, the presentation of the article content is usedwebviewControl, specificallyUIWebvieworWKWebviewPress no tables, that’s not the point of this article. In my demo, I used itUIWebview.
• In Jane’s bookfoundTAB bar at the top of the content, there is also a popular content recommended rotation chart. Similar to it, some activities in the app promotion rotation chart, as well as advertising pages, their details page content display mostly use WebView. In the brief book, the next level page corresponding to the wheel cast chart is also the article display page, with basically the same characteristics.
  
  
  

  

• On the basis of Webview, added in line with the browser user habits of the navigation bar button. Including on the leftreturnandShut downButton. And the function list button on the right.
• At the bottom of the page is a toolbar that provides four common actions. Note the comment button here, which is one of our talking points below.

2. Analysis of interface characteristics

• Generally, each client’s content page has some design that suits its function points. Jane is no exception. For example, in the content area of the article, click on the author’s avatar (which itself is also part of the web page, so it can be understood as corresponding to a link) and jump to the author’s personal home page. Note that it is easy to find that it is a native page of the client, that is, a VC.
  
  
  

  

• Click on the bottom toolbarcommentsThe button (native component) and the page (Web page) slide to the comments area, as shown
  
  
  

  

• Write your own comments on an article (using native components), and update the comment list (web content).
• Jane book for the display of content made a distinction between inside and outside the station. According to my own brief test, from Jane book domain namewww.jianshu.comThe content below, during the loading process, is no progress bar, the user experience is very similar to the native page. For third-party content, the loading progress bar common in common browsers will appear during the loading process, as shown in the following figure:
  
  
  

  

• For simple domain names, the cross will not appearShut downButtons. This is also intended to create a user experience that is similar to a native page, so that the user does not notice that it is a Web interface. Third-party content, on the other hand, will appear in accordance with browser usageShut downButton, as shown above.

Third, we need to reserve knowledge

1. The Hybrid

• In a Hybrid architecture, the native interface and the Web page need to communicate frequently and in a two-way way. Native code can be builtJavaScriptStatement, which is executed by the WebView to achieve the desired effect on the Web page. Native can also be called from within a WEB page’s JS fileObjective-CMethod to perform actions that native methods can only do. The libraries associated with this areWebViewJavascriptBridgeAs well asJavaScriptCore, students who need it can find out by themselves.

2. Related features of UIWebview

• UIWebviewDelegate
  
  The webView proxy method is familiar, and we can do what we need to do before the page loads, when it starts loading, when it finishes loading, and when it fails. Here we need to use this proxy method:
  
  - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
  
  The WebView decides whether to load based on the results it returns.
• To execute a JS statement:
  
  - (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
  
  We can build our own JS statement and deliver it to the WebView through this method
• The goback related
  
  UIWebviewHaving a Boolean typecanGoBack,loadingBy monitoring their values, we can know whether the current page can be rolled back and whether the page is loading.
  
  In contrast, possession- (void)goBack;The page is returned, just as we would in a browser.

Four, the imitation of related features

For the features mentioned above, I wrote a demo that briefly mimicked them. Of course, the official implementation of the simple book will take into account all aspects, but my demo is only based on the idea of Hybrid architecture, hoping to throw a brick into the light. Here is a mock implementation of the page in the demo:

1. Initialize the page

In demo, use a web page URL to initialize VC: – (instanceType)initWithURL:(NSURL *)URL; This URL corresponds to the link to the article. The top navigation bar and the bottom toolbar are the system’s native UINavigationBar and UIToolBar, and the button material uses Alibaba’s Iconfont font.

2. Click the author’s profile picture to enter the personal homepage

As for the implementation of this feature, if you follow the idea of Hybrid architecture, belong to the Web page to call the native method, into a native VC. Click the avatar, the JS script executes the code, calls the interface exposed by the native method, and executes the native method. Here I use a simple method to achieve: the native code uses the proxy method mentioned before, after the user clicks on the avatar, intercepts the URL, analyzes the URL as the avatar part, and directly executes the native method to jump to the personal homepage VC. By analyzing the source code of the simple book article page, I found that utm_medium=note-author-link is a parameter in the Query part of the URL corresponding to the user’s profile picture. On this basis, In – (BOOL) webView: (UIWebView *) webView shouldStartLoadWithRequest (NSURLRequest *) request NavigationType :(UIWebViewNavigationType)navigationType agent (UIWebViewNavigationType)navigationType agent (UIWebViewNavigationType) Here’s the code:

NSURL *destinationURL = request.URL; NSString *URLQuery = destinationURL.query; // Click on the avatar in the article to jump to the native page. Here, a parameter in the profile picture link is used to determineif ([URLQuery containsString:@"utm_medium=note-author-link"])
    {
        NSLog(@"I jumped to my personal page.");
        AvatorViewController *avatorVC = [[AvatorViewController alloc] init];
        [self.navigationController pushViewController:avatorVC animated:YES];
        return NO;
    }Copy the code

NO is returned because there is NO need to jump to the Web page with an avatar link.

Here’s a tip: If you want to view the source code of a mobile web page on a Mac, just type the page in Safari, select Safari on iOS under the User Agent under Development options, and then use the source code to view the source code of the mobile web page.

3. Click the comment button to slide the page to the comment area

This feature is implemented and similar to the above, click the comments button, native code to build a JS statements, by – (nullable nsstrings *) stringByEvaluatingJavaScriptFromString (nsstrings *) script; Method is used to perform sliding operations by the Web page. The code is as follows:

- (void)scrollToCommentField
{
    [self stringByEvaluatingJavaScriptFromString:@00 "scrollTo (0205)"];
}Copy the code

The JS statement here is very simple, because the front-end knowledge of the author is still lack, did not think of can accurately slide the comment area JS statement, so the brief implementation, point to the end.

4. Write comments for native components and update web pages

Here first need to post the article page page source code:

<! --> <div data-vcomp="comments-list" data-lazy="3">
    <script type="application/json">
      {"likedNote":true."commentable":true."publicCommentsCount": 3."noteId": 2491941,"likesCount":43}
    </script>
  </div>Copy the code

As you can see, the comment content of the page is loaded asynchronously. So I think the logical implementation of this feature is that the native component submits a new comment to the server, and after receiving a successful callback, the native component interacts with the Web page, performs the update and loads the JS code of the comment list, and sees its own new comment.

5. Distinguish between internal and external site pages

The implementation method here is similar to that of clicking profile picture. By intercepting the URL of the link and distinguishing between internal links and third-party links, different loading interfaces are adopted at the beginning of loading, or a third-party VC is opened separately for third-party links. Demo on the third party link close button display logic, made the corresponding processing.

Five, deficiencies in demo

As you can see here, I haven’t explicitly defined the Bridge, Router, and other modules that come to mind when we think of Hybrid. This is also intended to make it easier for you to understand the Hybrid model in a way that is more like native code writing in the past. At the same time, demo involves more native code to the Web page communication operations. Without JS code calls to native code, this is because the way station in a short book client user and iOS development point of view, perform the operation for JS end, and some of you cannot do, this is the task of the of the front-end partners work together with you, and for an article to help everybody introduction Hybrid, from the unilateral interaction, A glimpse is enough.

Six, some thoughts

In fact, after writing so much, I think it is most important to gain some insights. What I want to talk about may be more important ideological things.

1. One of the trends of the future is large front-end teams doing client development.

• As you can see here, if your team wants to do Hybrid product development, it’s not going to be possible for iOS or Android client engineers to do it. During the development of the client framework, specific technical details need to be communicated with the front-end engineer. For example, how to design interfaces to better accommodate both client and front-end features, and how to take a holistic view of a problem rather than just looking at it from the client’s perspective. This is probably one of the gaps between the average iOS developer and the big bull.
• Familiarity with front-end languages is one of the increasing recruitment requirements for client engineers. If you can master the front-end language as well as the client side, there are many more possibilities in the next trend. So start your front-end learning.

2. In Hybrid mode, how to choose and reject product technical solutions

• As seen above, there are obvious differences between internal domain name content and third-party content display on the Brief client. When reading a Jian shu article, the user does not realize that they are reading on a browser, which greatly improves the user experience in many ways. In order to do this, I guess Jane books first need to very good CDN to accelerate their own content, to ensure that the won’t take too long, when the content is loaded at the same time take some preload strategy, the second is when the load content, using the same as the primary interface part loading interface, remove the progress bar, simulation of the native interface loading process. For third-party links, useProgress bar + Return and close buttonsIs more in line with the user’s habit of reading in the browser, and can be intuitively distinguished from their own content, which also improves the user experience.
• It is also a matter of deciding which features are available for both native and Web pages. For example, click the comment button and page swipe, a feature that uses web page swiping rather than native controls is more natural and user-friendly. For writing comments, the native keyboard and editor components are much more stable and controllable than typing on a Web page.

7. Demo of the article

For the content of the article, I wrote a demo, and this is the demo address. I have written detailed comments for the code to make it easier to understand. If you find it helpful, please click a star on Github for me. Thank you very much!