使用NativeScript破解

So you are a pro in Javascript OR a real good Angular, Vue developer and now want to explore building native apps on mobile. However, you are getting a migraine seeing the number of options! React Native, Dart, Kotlin which one should I choose? Well, take a sip of your favourite coffee and sit back. We got you, NativeScript!

因此，您是Java专业人士还是真正的Angular Vue开发人员，现在想探索在移动设备上构建本机应用程序。 但是，看到选项的数量让您感到很偏头痛！ React Native，Dart，Kotlin我应该选择哪一个？ 好吧，a一口您最喜欢的咖啡，然后坐下。 我们抓住了你，NativeScript！

NativeScript allows you to build native apps using Angular or TypeScript or modern Javascript and still give you the truly native UI and performance. It allows you to embed a web framework to generate a native app. Sounds cool, doesn’t it?

NativeScript允许您使用Angular或TypeScript或现代Javascript构建本机应用程序，并且仍然为您提供真正的本机UI和性能。 它允许您嵌入Web框架以生成本机应用程序。 听起来不错，不是吗？

So, let’s get cracking with it!

所以，让我们开始吧！

Architecture

建筑

NativeScript prominently uses MVVM model which enables it to have two-way data binding, so the data gets instantly reflected on the view.

NativeScript主要使用MVVM模型，该模型使它具有双向数据绑定，因此数据可立即反映在视图上。

Another important advantage of this approach is that Models and View Models are reusable. This makes it possible to use it with Vue and Angular frameworks where most of the business logic can be shared with WEB components.

这种方法的另一个重要优点是模型和视图模型是可重用的。 这使得它可以与Vue和Angular框架一起使用，在该框架中，大多数业务逻辑可以与WEB组件共享。

It also provides a rich set of Javascript modules which is categorized as UI Modules, Application Modules, Core Modules. These can be accessed at any time to write any complex application.

它还提供了丰富的Javascript模块集，这些模块分为UI模块，应用程序模块，核心模块。 可以随时访问它们以编写任何复杂的应用程序。

Native Plugins are written in platform-oriented languages (Swift and Java) which generally acts as a wrapper and can be used with Javascript plugin.

本机插件以面向平台的语言(Swift和Java)编写，通常用作包装器，可与Javascript插件一起使用。

Write once run everywhere

一次编写随处可见

NativeScript helps in building native applications in Javascript, however, you can build mobile apps either with JavaScript/TypeScript or Angular. Most of the code written in JS will remain the same for both platforms. It allows code sharing for business logic and some UI styles for Android and iOS.

NativeScript有助于使用Javascript构建本机应用程序，但是，您可以使用JavaScript / TypeScript或Angular来构建移动应用程序。 两种平台上用JS编写的大多数代码都将保持不变。 它允许代码共享业务逻辑，以及一些Android和iOS的UI样式。

Performance

性能

NativeScript shows the ability of running the animations at 60 frames per second, virtualized scrolling, caching similar to native apps. Moreover, it can offload long-running processes to maintain frontend speed.

NativeScript 具有以每秒60帧的速度运行动画，虚拟化滚动以及类似于本机应用程序进行缓存的功能。 此外，它可以卸载长时间运行的进程以维持前端速度。

In the latest release of NS v6.7.8 the newly composed Webpack module has improved the performance on Android considerably.

在最新版本的NS v6.7.8中，新组成的Webpack模块大大提高了Android上的性能。

From NS v6.7.8 onwards we can see the following improvements

从NS v6.7.8开始，我们可以看到以下改进

1. Build process for Android increases by 30% while for IOS it increases by 10%
   Android的构建过程增加了30％，而IOS的构建过程增加了10％
2. Streamlined store approval process makes it enable a faster process for new versions to update.
   简化的商店批准流程使它可以更快地更新新版本。

Native device features

本机设备功能

NativeScript provides the feature of writing native expressions directly, with Javascript or TypeScript. This avoids unwanted use of Javascript wrappers around the native ones, so the developer can focus only on business logic. It allows us to call native APIs from Javascript directly because they deal with the same Native APIs.

NativeScript提供了使用Javascript或TypeScript直接编写本机表达式的功能。 这样可以避免在本地包装周围不必要地使用Javascript包装，因此开发人员只能专注于业务逻辑。 它允许我们直接从Javascript调用本机API，因为它们处理相同的本机API。

For e.g, If you want to integrate the camera feature in an app, you can initialize this through JS also.

例如，如果要在应用程序中集成相机功能，则也可以通过JS初始化。

In addition to this, NativeScript readily provides support to newly available IOS and Android API, by which we can easily shift to new features rather than depending on a specific version.

除此之外，NativeScript随时可以为新提供的IOS和Android API提供支持，通过它们我们可以轻松地转移到新功能，而不必依赖于特定版本。

Pre-styled UI components

预样式的UI组件

There is a rich set of pre-styled components available with NativeScript. You can simply plug and play these components. Also, there is a good bifurcation on layout and components. You can customize the components quite easily.

NativeScript提供了一组丰富的预样式化组件。 您可以简单地即插即用这些组件。 同样，在布局和组件上也存在分歧。 您可以非常轻松地自定义组件。

For e.g. Date picker, Bottom Navigation, Slider, Tabs, etc.

例如，日期选择器，底部导航，滑块，选项卡等。

Community support

社区支持

Earlier, there was less community support available for NativeScript but with time we are seeing a good amount of developers digging into the framework. Also, many organizations are adopting the framework for app development, which automatically helps in building the community.

早期，NativeScript的社区支持较少，但是随着时间的流逝，我们看到大量的开发人员正在研究该框架。 此外，许多组织都采用了应用程序开发框架，该框架会自动帮助建立社区。

Ready to use plugins

准备使用插件

The NativeScript plugins are building blocks that encapsulate some functionality and help developers build apps faster (just like the NativeScript Core Modules, which is a plugin). Most are community-built, written in TypeScript/JavaScript. Some include native libraries, which are called from the TS/JS code thanks to the Runtimes. Native Script maintains an official marketplace of plugins for most of the native modules.

NativeScript插件是封装一些功能并帮助开发人员更快构建应用程序的构建块(就像NativeScript Core Modules，它是一个插件)。 大多数都是社区构建的，使用TypeScript / JavaScript编写。 其中包括本地库，由于运行时，这些库从TS / JS代码中调用。 Native Script为大多数本机模块维护了官方的插件市场 。

In addition to this, NS does provide support from npm, CocoaPods (iOS), and Gradle (Android) directly, along with hundreds of verified NativeScript plugins.

除此之外，NS确实直接从npm，CocoaPods(iOS)和Gradle(Android)以及数百个经过验证的NativeScript插件提供支持。

AR/VR capabilities

AR / VR功能

NativeScript lets you access iOS and Android APIs to build mobile apps using JavaScript, and ARKit is no exception. The releases of AR SDKs from Apple (ARKit) and Google (ARCore) have presented an opportunity for NativeScript to enable developers to create immersive cross-platform AR experiences. There is a plugin called nativescript-ar available on the marketplace for this.

NativeScript允许您访问iOS和Android API以使用JavaScript构建移动应用程序，ARKit也不例外。 苹果( ARKit )和Google( ARCore )的AR SDK的发布为NativeScript提供了一个机会，使开发人员能够创建沉浸式跨平台AR体验。 市场上有一个名为nativescript-ar的插件可用于此目的。

Web support

网路支援

As NativeScript comes with the support of different web frameworks like Angular, Vue, it allows you to build web and mobile apps out of a single codebase. It won’t stop at sharing only services but you can easily share:

由于NativeScript附带了不同的Web框架(如Angular，Vue)的支持，因此您可以使用单个代码库构建Web和移动应用程序。 它不仅会共享服务，而且您可以轻松共享：

• Component class definition — that is the xyz.component.ts
  组件类定义-即xyz.component.ts
• Pipes
  管子
• Router configuration
  路由器配置
• SCSS variables
  SCSS变量

With NativeScript 6.0 the amount of code reuse between web and mobile has increased. NativeScript can achieve 70% code reuse across web and mobile, including support for PWAs. This shortens development and testing cycles for both web and mobile apps in production while ensuring consistency across digital channels. It also lowers the cost of development and maintenance for deployed applications.

使用NativeScript 6.0，Web和移动设备之间的代码重用量增加了。 NativeScript可以在Web和移动设备上实现70％的代码重用，包括对PWA的支持。 这缩短了生产中Web和移动应用程序的开发和测试周期，同时确保了跨数字渠道的一致性。 它还降低了已部署应用程序的开发和维护成本。

Learning curve

学习曲线

As NativeScript is based on Javascript, you can use Typescript, Angular or Vue to develop apps. It also supports the declarative coding style. So being a web developer, you don’t need to learn new languages or syntax.

由于NativeScript基于Javascript，因此您可以使用Typescript，Angular或Vue开发应用程序。 它还支持声明式编码样式。 因此，作为一名Web开发人员，您无需学习新的语言或语法。

NativeScript bypasses the dependency to learn Objective C(IOS) and Java/Kotlin(Android) for bridging concepts by injecting all iOS and Android APIs into the Javascript Virtual Machines.

通过将所有iOS和Android API注入Javascript虚拟机，NativeScript绕过了依赖关系，学习了Objective C(IOS)和Java / Kotlin(Android)来桥接概念。

Language used

使用语言

As mentioned earlier, NativeScript uses JavaScript to build native mobile apps. It comes in different flavors — pure JavaScript/ TypeScript, with Angular and with Vue.js. So you can choose any of the given to start with your app.

如前所述，NativeScript使用JavaScript来构建本机移动应用程序。 它具有不同的风格-纯JavaScript / TypeScript，Angular和Vue.js。 因此，您可以选择任何给定的以从您的应用程序开始。

PWA support

PWA支持

You can create a PWA with the NativeScript. Through the use of the NativeScript and Angular integration, it’s quite easy to build a PWA (Progressive Web App).

您可以使用NativeScript创建PWA。 通过使用NativeScript和Angular集成，构建PWA(渐进式Web应用程序)非常容易。

From v6.0 onwards NativeScript provides support for PWA which also enhances code reusability between mobile and web applications.

从v6.0开始，NativeScript提供对PWA的支持，它还增强了移动和Web应用程序之间的代码可重用性。

With the new concept of HMR (Hot Module Replacement) provides developers to see changes to JavaScript and CSS resources without reloading the application which enables a better user experience for PWA

借助HMR(热模块替换)的新概念，开发人员无需重新加载应用程序即可查看JavaScript和CSS资源的更改，从而为PWA提供更好的用户体验

Current limitations

当前限制

NativeScript does have some limitations mostly related to App size which is mostly large in size, but you can overcome this limitation by running Webpack and Uglify. Android performance was not up to market standard in initial versions, but later on, in latest releases v.6.7.8 it is claimed to have better performance along with support for Android X library.

NativeScript确实有一些限制，这些限制主要与应用程序大小有关，而应用程序大小通常很大，但是您可以通过运行Webpack和Uglify来克服此限制。 Android的性能未达到初始版本的市场标准，但后来在最新版本v.6.7.8中，它具有更好的性能以及对Android X库的支持。

Closing Thoughts

总结思想

As a web developer, when you start thinking about building mobile apps with cross-compiled platforms, it is definitely worth exploring NativeScript as one of the reliable options. As mentioned above it comes with a lot of capabilities, features and plugins which we need for any mobile app development. Cheers !!

作为Web开发人员，当您开始考虑使用交叉编译的平台构建移动应用程序时，绝对值得将NativeScript视为可靠的选择之一。 如上所述，它带有许多移动应用程序开发所需的功能，特性和插件。 干杯！

翻译自: https://medium.com/globant/get-cracking-with-nativescript-421b45e0d1b3