构建混合移动应用的流行框架优缺点对比

青旅半醒 2022-07-14 20:18 253阅读 0赞

### 英文原文：[Comparing The Top Frameworks For Building Hybrid Mobile Apps][] ###

<table style="margin:0px; padding:10px 0px"> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:0px; border-right-width:1px; border-right-style:solid; border-right-color:rgb(227,227,227)"> 
    <div style="margin:0px; padding:0px 10px; line-height:1.6; width:750px; font-size:10.5pt; overflow:hidden"> 
     <h3 style="margin:0px 0px 10pt; padding:0px 0px 5px; font-size:12pt; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(204,204,204)"> 3.&nbsp;<a href="http://www.oschina.net/p/framework7" style="margin:0px; padding:0px; color:rgb(62,98,166); outline:0px" rel="nofollow">Framework 7</a><br style="margin:0px; padding:0px"> </h3> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> <img src="http://static.oschina.net/uploads/space/2015/1014/173249_a8qy_865233.jpg" alt="" style="margin:0px; padding:0px; border:0px; max-width:640px"></p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> &nbsp;Framework 7</p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> &nbsp;Framework 7比较酷的地方在于它完全是框架无关的(没有像Angular或者React那样的外部依赖)，但是确依然可以让app在组件和动画方面有着native的风格和体验。开发者只需要会HTML, CSS和JavaScript就可以开发应用，而不用把代码搞得很复杂。Framework 7并不包含任何用于仿真或者打包的工具，，所以你需要将其与Cordova或者PhoneGap一起使用。</p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> <span style="margin:0px; padding:0px">正面:</span></p> 
     <ul style="margin:0.5em 0px 0.5em 1.5em; padding:0px; list-style-position:inside"> 
      <li style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; display:inline"> 简单易用，只依赖HTML, CSS和JavaScript</p> </li> 
      <li style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; display:inline"> 性能不错</p> </li> 
      <li style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; display:inline"> 可以和任意JavaScript框架结合使用</p> </li> 
     </ul> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> <span style="margin:0px; padding:0px">负面:</span></p> 
     <ul style="margin:0.5em 0px 0.5em 1.5em; padding:0px; list-style-position:inside"> 
      <li style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; display:inline"> 未包含PhoneGap/Cordova工具，不过可以支持</p> </li> 
     </ul> 
     <h3 style="margin:0px 0px 10pt; padding:0px 0px 5px; font-size:12pt; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(204,204,204)"> 4.&nbsp;<a href="http://www.oschina.net/p/reactnative" style="margin:0px; padding:0px; color:rgb(62,98,166); outline:0px" rel="nofollow">React Native</a></h3> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> <img src="http://static.oschina.net/uploads/space/2015/1014/173304_vepB_865233.jpg" alt="" style="margin:0px; padding:0px; border:0px; max-width:640px"></p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> React Native</p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> 正如项目的名称表露的那样，React Native的目的是构建真正native的应用。而不是构建在Webview里运行的混合模式的应用。开发完全由JavaScript和React来完成。这个框架不太适合web开发的新手，不过其背后有一个庞大的社区，在各个方面都可以为你提供支持。最近这个框架还发布了Android版，这样你就可以真正实现跨平台的应用开发了。</p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> <span style="margin:0px; padding:0px">正面:</span></p> 
     <ul style="margin:0.5em 0px 0.5em 1.5em; padding:0px; list-style-position:inside"> 
      <li style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; display:inline"> Native级别的性能</p> </li> 
      <li style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; display:inline"> 庞大的社区支持</p> </li> 
     </ul> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> <span style="margin:0px; padding:0px">负面:</span></p> 
     <ul style="margin:0.5em 0px 0.5em 1.5em; padding:0px; list-style-position:inside"> 
      <li style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; display:inline"> 陡峭的学习曲线</p> </li> 
      <li style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; display:inline"> 目前开发工具只支持OS X</p> </li> 
     </ul> 
    </div> </td> 
   <td style="margin:0px; padding:0px 6px; width:210px"> &nbsp;</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:0px 6px; width:210px"> &nbsp;</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:10px 0px"> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:0px; border-right-width:1px; border-right-style:solid; border-right-color:rgb(227,227,227)"> 
    <div style="margin:0px; padding:0px 10px; line-height:1.6; width:750px; font-size:10.5pt; overflow:hidden"> 
     <h3 style="margin:0px 0px 10pt; padding:0px 0px 5px; font-size:12pt; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(204,204,204)"> 5.&nbsp;<a href="http://jquerymobile.com/" style="margin:0px; padding:0px; color:rgb(62,98,166); outline:0px" rel="nofollow">jQuery Mobile</a><br style="margin:0px; padding:0px"> </h3> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> <img src="http://static.oschina.net/uploads/space/2015/1014/173318_atiA_865233.jpg" alt="" style="margin:0px; padding:0px; border:0px; max-width:640px"></p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> jQuery Mobile</p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> 它是所有移动框架的爷爷， jQuery Mobile 的目的不是让 apps 的外观像 Android 或 iOS。而是为了帮助开发可以在所有移动浏览器（包括老旧的 Windows Phone，Blackberry 和&nbsp;Symbian）上良好运行的 web apps。因此，它是非常轻量级的，只依赖&nbsp;jQuery，很容易学会，同时还提供了良好的触摸识别和对 PhoneGap/Cordova 的支持。</p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> <span style="margin:0px; padding:0px">优点:</span></p> 
     <ul style="margin:0.5em 0px 0.5em 1.5em; padding:0px; list-style-position:inside"> 
      <li style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; display:inline"> 支持广泛的移动浏览器</p> </li> 
      <li style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; display:inline"> 简单易用</p> </li> 
     </ul> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> <span style="margin:0px; padding:0px">缺点:</span></p> 
     <ul style="margin:0.5em 0px 0.5em 1.5em; padding:0px; list-style-position:inside"> 
      <li style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; display:inline"> 样式陈旧，既不像&nbsp;iOS&nbsp;也不像 Android</p> </li> 
      <li style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; display:inline"> 不包含 PhoneGap/Cordova builder，但支持</p> </li> 
     </ul> 
     <h3 style="margin:0px 0px 10pt; padding:0px 0px 5px; font-size:12pt; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(204,204,204)"> 6.&nbsp;<a href="https://www.nativescript.org/" style="margin:0px; padding:0px; color:rgb(62,98,166); outline:0px" rel="nofollow">Native Script</a></h3> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> <img src="http://static.oschina.net/uploads/space/2015/1014/173337_r7e7_865233.jpg" alt="" style="margin:0px; padding:0px; border:0px; max-width:640px"></p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> NativeScript</p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> Native script 的最大特点是，用 TypeScript 语言编写 app 的功能，只需要编写一次，然后它可以针对不同的操作系统（包括&nbsp;Android，iOS 和 Windows Phone）产生对应的可执行代码，打包后，应用是按原生程序的方式运行的，并没有打开和运行浏览器。使用该框架确实需要一些编程技巧，但它详尽深入的文档弥补了这方面的不足。</p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> <span style="margin:0px; padding:0px">优点:</span></p> 
     <ul style="margin:0.5em 0px 0.5em 1.5em; padding:0px; list-style-position:inside"> 
      <li style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; display:inline"> “编写一次，到处使用”&nbsp;的方式</p> </li> 
      <li style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; display:inline"> 强大的文档</p> </li> 
     </ul> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> <span style="margin:0px; padding:0px">Cons:</span></p> 
     <ul style="margin:0.5em 0px 0.5em 1.5em; padding:0px; list-style-position:inside"> 
      <li style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; display:inline"> &nbsp;陡峭的学习曲线</p> </li> 
      <li style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; display:inline"> &nbsp;较小的社区</p> </li> 
     </ul> 
    </div> </td> 
   <td style="margin:0px; padding:0px 6px; width:210px"> 
    <div style="margin:0px 10px; padding:0px; float:left; width:126px; height:45px"> 
     <h6 style="margin:0px; padding:0px; font-weight:normal; font-size:10pt; color:rgb(68,68,68)"> <br> </h6> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:10px 0px"> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:0px; border-right-width:1px; border-right-style:solid; border-right-color:rgb(227,227,227)"> 
    <div style="margin:0px; padding:0px 10px; line-height:1.6; width:750px; font-size:10.5pt; overflow:hidden"> 
     <h3 style="margin:0px 0px 10pt; padding:0px 0px 5px; font-size:12pt; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(204,204,204)"> 7.&nbsp;<a href="http://famous.org/" style="margin:0px; padding:0px; color:rgb(62,98,166); outline:0px" rel="nofollow">Famous</a><br style="margin:0px; padding:0px"> </h3> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px; font-family:Verdana,sans-serif,宋体; font-size:13.3333px"> <img title="" src="http://static.oschina.net/uploads/space/2015/1014/173351_vxvD_865233.jpg" alt="Famous" style="margin:0px; padding:0px; border:0px; max-width:640px"></p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px; font-family:Verdana,sans-serif,宋体; font-size:13.3333px"> Famous</p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px; font-family:Verdana,sans-serif,宋体; font-size:13.3333px"> Famous切入web和移动开发的方式有点与众不同。它使用WebGL把你的HTML的DOM树组合在一起，把所有的内容在一个canvas里显示，有点类似HTML游戏引擎做的那样。这种独特的技术可以让框架在60 fps的速度下运行app，这已经和大部分native的app一样流畅了。可惜的是，这个项目现在不再活跃了，也没有合适的文档可供参考。</p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px; font-family:Verdana,sans-serif,宋体; font-size:13.3333px"> <span style="margin:0px; padding:0px">正面:</span></p> 
     <ul style="margin:0.5em 0px 0.5em 1.5em; padding:0px; list-style-position:inside"> 
      <li style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; display:inline"> Native的性能</p> </li> 
     </ul> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px; font-family:Verdana,sans-serif,宋体; font-size:13.3333px"> <span style="margin:0px; padding:0px">反面:</span></p> 
     <ul style="margin:0.5em 0px 0.5em 1.5em; padding:0px; list-style-position:inside"> 
      <li style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; display:inline"> 开发基本停滞</p> </li> 
      <li style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; display:inline"> 文档不全</p> </li> 
      <li style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; display:inline"> 社区不健全</p> </li> 
     </ul> 
     <h3 style="margin:0px 0px 10pt; padding:0px 0px 5px; font-size:12pt; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(204,204,204)"> 汇总数据</h3> 
     <table style="margin:0px; padding:0px; font-family:Verdana,sans-serif,宋体; color:rgb(0,0,0); font-size:13.3333px"> 
      <tbody style="margin:0px; padding:0px"> 
       <tr style="margin:0px; padding:0px"> 
        <th style="margin:0px; padding:0px">框架</th> 
        <th style="margin:0px; padding:0px">Native体验</th> 
        <th style="margin:0px; padding:0px">依赖</th> 
        <th style="margin:0px; padding:0px">社区</th> 
        <th style="margin:0px; padding:0px">文档</th> 
        <th style="margin:0px; padding:0px">工具</th> 
       </tr> 
      </tbody> 
      <tbody style="margin:0px; padding:0px"> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:0px">Ionic</td> 
        <td style="margin:0px; padding:0px">7/10</td> 
        <td style="margin:0px; padding:0px">AngularJS (可选)</td> 
        <td style="margin:0px; padding:0px">9/10</td> 
        <td style="margin:0px; padding:0px">8/10</td> 
        <td style="margin:0px; padding:0px">强大的 CLI, Ionic SDK</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:0px">Onsen UI</td> 
        <td style="margin:0px; padding:0px">6/10</td> 
        <td style="margin:0px; padding:0px">AngularJS (可选)</td> 
        <td style="margin:0px; padding:0px">4/10</td> 
        <td style="margin:0px; padding:0px">9/10</td> 
        <td style="margin:0px; padding:0px">Monaca Cloud IDE (有免费方案)</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:0px">Framework 7</td> 
        <td style="margin:0px; padding:0px">8/10</td> 
        <td style="margin:0px; padding:0px">只需HTML, CSS 和JS</td> 
        <td style="margin:0px; padding:0px">6/10</td> 
        <td style="margin:0px; padding:0px">8/10</td> 
        <td style="margin:0px; padding:0px">无</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:0px">React Native</td> 
        <td style="margin:0px; padding:0px">8/10</td> 
        <td style="margin:0px; padding:0px">React</td> 
        <td style="margin:0px; padding:0px">8/10</td> 
        <td style="margin:0px; padding:0px">5/10</td> 
        <td style="margin:0px; padding:0px"> <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> Chrom的扩展工具React Developer Tools</p> </td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:0px">jQuery Mobile</td> 
        <td style="margin:0px; padding:0px">3/10</td> 
        <td style="margin:0px; padding:0px">jQuery</td> 
        <td style="margin:0px; padding:0px">8/10</td> 
        <td style="margin:0px; padding:0px">5/10</td> 
        <td style="margin:0px; padding:0px">无</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:0px">Native Script</td> 
        <td style="margin:0px; padding:0px">8/10</td> 
        <td style="margin:0px; padding:0px">TypeScript</td> 
        <td style="margin:0px; padding:0px">5/10</td> 
        <td style="margin:0px; padding:0px">9/10</td> 
        <td style="margin:0px; padding:0px">免费的 CLI, 其他的付费可选</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:0px">Famous</td> 
        <td style="margin:0px; padding:0px">7/10</td> 
        <td style="margin:0px; padding:0px">WebGL, AngularJS</td> 
        <td style="margin:0px; padding:0px">3/10</td> 
        <td style="margin:0px; padding:0px">5/10</td> 
        <td style="margin:0px; padding:0px">无</td> 
       </tr> 
      </tbody> 
     </table> 
     <h3 style="margin:0px 0px 10pt; padding:0px 0px 5px; font-size:12pt; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(204,204,204)"> 总结</h3> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px; font-family:Verdana,sans-serif,宋体; font-size:13.3333px"> 没有真正完美的框架 – 每个都有自己的优点和缺点，用哪个取决于你要用他们干什么。</p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px; font-family:Verdana,sans-serif,宋体; font-size:13.3333px"> 我们希望这个快速的比较能对你有帮助！如果你对列表里的<span style="margin:0px; padding:0px; font-size:13.3333px">或者类似的</span>框架有一些经验，不妨给我们留言，分享你对混合应用开发的看法！</p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

[Comparing The Top Frameworks For Building Hybrid Mobile Apps]: http://tutorialzine.com/2015/10/comparing-the-top-frameworks-for-building-hybrid-mobile-apps/