当前位置：网站首页>Continuous breakthrough and steady progress -- Review and Prospect of cross platform development technology of mobile terminal

Continuous breakthrough and steady progress -- Review and Prospect of cross platform development technology of mobile terminal

2022-07-01 05:39:00 【No Silver Bullet】

Blog Directory

One 、 The past and present life of the mobile end cross platform development technology stack

AngularJS Born in 2009 year , from Misko Hevery Et al. , after Google Acquired .

React Come of Facebook Internal projects , The company is interested in all JavaScript MVC Not satisfied with the framework , Decided to develop a set of , For erection Instagram Website , And in 2013 year 5 In open source .（ I have to sigh that big companies have technical strength , Namely ！）

React Native Born in 2013 Year of Facebook Internal hacking Marathon （hackathon）.

stay 2017 year Google I/O At the conference ,Google First release Flutter , It is Google The one released is used to create cross platform 、 Framework for high performance mobile applications .Flutter and Qt mobile equally , None of them use native controls , Instead, they all implement a self drawing engine , Use your own layout 、 Drawing system . To 2021 year 8 End of month , There has been a 127K Of Star,Star Number Github In the top 20 . Experienced 4 More than a year ,Flutter The ecosystem is growing rapidly , At home and abroad, there are very based on Flutter Success stories of , Domestic Internet companies basically have specialized Flutter The team . All in all , after 4 year ,Flutter Rapid development , It has been widely concerned and recognized in the industry , It was warmly welcomed by the developers , It has become one of the most popular frameworks in mobile cross end development .

The above is the development history of the front-end technology stack driven by foreign technology companies , Speaking of domestic , Cross platform development level DCloud On 2012 Started to develop small program technology , Continue to optimize webview Function and performance of , And add W3C and HTML5 China industrial alliance , Launched HBuilder development tool , Prepare for the subsequent industrialization .

2015 year ,DCloud The company has officially commercialized its own small program , Product name is “ Stream application ”, It is not B/S Light application of pattern , It's about being able to approach native functions 、 The performance of the App, And click and use , When you use it for the first time, you can download and use it at the same time .

Weex It's Alibaba in 2016 Cross platform mobile development framework released in , Ideas and principles and React Native similar , The underlying layers are rendered natively , The difference is the application layer development syntax （ namely DSL,Domain Specific Language）：Weex Support Vue Grammar and Rax grammar ,Rax Of DSL(Domain Specific Language) Grammar is based on React JSX Grammar sugar to create , and RN Of DSL Is based on React Of , I won't support it Vue.

Similarly, ,2013 One day in , stay Google You Yu River at work , suffer AngularJS Inspired by the , Extract what you think you need , Developed a lightweight framework Vue.js, And in 2014 Officially released in . What's interesting is that , It was originally named Seed, It means budding , This is indeed for later Vue 2.0、3.0 Our development has laid a solid foundation .

From the above brief history of technology stack development, we can see , Mainstream technology trends are dominated by large companies , Large companies have strong capital 、 Gather excellent talents 、 Dare to accept failure and other natural advantages , It's no wonder that it can become a trendsetter of mainstream technology .

Through the development process of the front-end development technology stack above , It can be summed up in two words ： Keep breaking through , Seek improvement in stability . The emergence of new technologies is always derived from solving problems that cannot be solved by existing technologies , It has just started to be applied in the company , Then it becomes an open source project . New technologies are in the process of development , Will gradually improve according to the problems to be solved , In order not to be replaced by other backward technologies .

Two 、 Learning summary and experience sharing

Himself in 2015 Contact began in Angular.js 1.*, In fact, what is said here angularjs It refers to the early angular edition , It's from 2009 The version that was born in , At that time angularjs Version update is slow , until 2016 year ,angularjs The version of is 1.7*, And after that ,angularjs Don't continue to update the old version , Instead, a new version has been launched angular2, This version is completely refactored from the bottom , So it's the same as before angularjs It can be said that it is not a framework , therefore , Now people are talking about angular All are angular 2 Later versions .

At that time, I applied AngularJS +Ionic + Hbuilder The technology stack is used to develop the mobile terminal, which is similar to Dingdang fast medicine APP, Realize the client-side drug information query 、 Purchase medicine and other functions .

After the work , In view of the lack of mobile developers in the team 、 My thirst for knowledge of new technology and other factors , Start to contact mobile end cross platform development technology React Native, That is what people usually say RN.

Engage in front-end development 5 Since then , Summarized below ：

To learn a new technology, you first need to understand the project file structure generated by the scaffold , It should be noted that the project file structure generated by different versions of scaffold is different , Don't be confused when you encounter this phenomenon , Before applying the scaffolding project, it is recommended to read the application manual on the official website portal .
After understanding the structure of the project file , Next, you need to know the file loading sequence after the current project is started , When you have a general understanding of the principles of project initiation , When the project is optimized later , There will be confidence in my heart , Because you already know when and what to do with which file .
At present, most of the cross platform development technology stacks are open source , This is also the infinite charm of open source . You can download the source code , Then read the source code to understand the ideas and subtleties of the founders of the technology stack in designing this framework , In the future development work , You can also learn from excellent programming ideas , Make your code simple , More glamorous .
As for technology stack grammar learning , I suggest learning through project practice driven method . Through project development , You will understand most of the syntax of the technology stack 、 The instructions have some understanding , There should be a lot of doubts at the beginning of learning , Don't worry , Record these doubts in your notebook first , Because your current skills are not deep enough , When you know the technology stack 60% After mastering , Look back at these doubts , You will find that your doubts have become insignificant in your eyes .

3、 ... and 、 Experience

I have studied Android、Angularjs、Vue2、React Native、uni-app Such as mobile terminal native 、 Cross platform technology stack , Look back and think , You will find that learning new technologies will never change , The implementation principles of many technology stacks are interlinked ： Implement the monitoring model or by setting the listener or monitoring function DOM Changes in attributes , Then execute the corresponding update function according to the listening event , To update the view .

Four 、2022 Mobile end cross platform technology trend prediction

At present, the mainstream mobile end cross platform technical solutions can be divided into three categories ,

Use Native built-in browser load HTML5 Of Hybrid Technical solution , The main reasons for adopting such a scheme are Cordova、Ionic and Wechat applet ;
Use JavaScript Language development , And then use Native component Rendering , The main reasons for adopting this scheme are React Native、Weex and Light application ;
Use Built in rendering engine and Built in native components To achieve cross platform , The main reasons for adopting such a scheme are Flutter.

For other cross platform development solutions , Basically, it can be abandoned , Comparison React Native and Flutter,React Native and Flutter In application development , Almost efficient .

4.1 React Native

Insert picture description here
2022 The first framework worth considering in is React Native. We talked about that earlier ,React Native yes Facebook On 2015 Open source released in 、 Cross platform application development framework . As 2013 The product of an internal hacking marathon held in , At present, it has become the most popular native App Develop one of the alternatives , Have 2289 name GitHub contributor , Gain more than 101K GitHub stars, And has been in the active update maintenance state . Growing 、 Mature community awareness makes it crucial to cultivate a reliable and experienced development team .

Insert picture description here

Learn Once and Write Anywhere

React Native be based on React.JS Realization , utilize JavaScript by Android and iOS Users provide a truly native app look and experience . in addition , The framework also supports developers to use Java、Objective-C or SWIFT Write some native modules to handle complex operations , Such as video playback or image editing .

GUI aspect ,React Native By using Android and iOS Our local controller can provide a near native user experience . in addition , It's also used with UI Elemental ReactJS library , Help speed up UI design process .

4.2 Flutter

Insert picture description here
2022 The second framework worth considering in 2007 is Flutter. Release 4 Since then , For cross platform development technologies , It's still a “ New people ”. For all that , stay GitHub It has gained more than 136K stars, And have 974 name GitHub contributor , Always in active update maintenance status . As 2019 year Stack Overflow One of the three most popular frameworks in the survey ,Flutter It's a force that can't be ignored , To be reckoned with .
Insert picture description here
Flutter application Dart Language implementation , Google calls it " Client optimization ", Suitable for any platform " Build applications quickly ". The reasons why it is widely accepted by developers are as follows ：

Grammatical reference C/C++ and Java;
The official documentation is extensive and fairly simple .
Dart With a large number of Flutter Compatible packages , Building complex applications is handy .

Flutter The main advantages are ：

be based on Dart The compiler and Flutter Based on DART Compiling “UI-as-a-code” The widget , Its performance is better than any other cross platform mobile development framework , It's faster 、 More direct communication with the platform , Without the need for JavaScript Bridge (Reaction Native It is through JavaScript Bridge communication ).
Flutter Not dependent on a set of native components , It's using visualization 、 structured 、 Platform based and interactive widgets UI Design , All these implementations are done by the framework graphics engine . in addition ,Flutter Leave a lot of customization space for developers , Customized design for developers .

4.3 summary

In the era of multi terminal parallel development , Cross platform technology solution is indeed a direction worthy of consideration and promising , Especially the above mentioned React Native and Flutter Mobile end cross platform technical solution .

The former is a mature and stable framework , Using one of the most popular programming languages , And has a mature large developer community . The latter is a rapidly developing technology , As a rising star , Even though it's better than React Native Much younger , But it has also won the favor of many developers around the world .

In the process of multi terminal development , Whatever you choose React Native、Flutter Or any other framework , Cross platform technology solutions will certainly save you and your team a lot of time and money , At the same time, it can maximize the market coverage for your products .

Last , Which technical solution is worth considering , Ultimately, it depends on the business objectives to be achieved 、 Project budget and project time limit .