BT

New Early adopter or innovator? InfoQ has been working on some new features for you. Learn more

Mobile Development Efficiency with NativeScript and Angular

| Posted by TJ VanToll Follow 0 Followers on Dec 07, 2016. Estimated reading time: 9 minutes |

Key takeaways

  • Developing native applications in different languages across Android, Windows, iOS and web is expensive and time consuming.
  • It’s in a company’s best interest to develop cross platform apps because it enables them to reach more customers.
  • Progress NativeScript is a cross-platform framework and allows for true native apps to be built from a single code base, while still enabling the productivity advantages of hybrid approaches.
  • With NativeScript, developers only need to know one language to get true native performance and functionality across platforms.
  • Tips for making the most out of Angular 2 and NativeScript include standardizing on Angular 2 to simplify, keeping code modular, learning to love TypeScript, and embracing each platform.

 

Tech trends are always changing, and with that, consumer expectations evolve as well. In the past year alone, the technology landscape has shifted immensely. As such, business leaders are faced with the challenge of either adapting to the new consumer expectations or falling behind. This is especially true in mobile. To meet both consumer demand and expectations, companies must develop for both mobile and web. Unfortunately for many, there are no easy ways to go about doing so. Developing for both platforms is complex, but with the right tools and framework, the process is a little easier.

The Need to Go Cross Platform

In today’s competitive climate, businesses are now more than ever focused on application development in an effort to propel their organizations into the digital age. According to survey data from Progress, half of the respondents plan to invest in building applications that support the customer engagement model in the next 12 months, and nearly half (47 percent) plan to invest in mobile methods to support operational improvement efforts, customer engagement initiatives and process improvements for agility with website, mobile and social platforms.

However, developing native applications in different languages across Android, Windows, iOS and web is expensive and very time consuming. Plus, the current hybrid approaches usually fail to deliver the same performance that native apps enable while consumers’ expectations around app performance continue to rise.

Companies also have a lot to lose if they choose not to go cross platform, as this practice is becoming a universal standard. Ultimately, it’s in the company’s best interest to go cross-platform because there is a clear increase in the ability to reach more users and if they do not pursue this methodology they will quickly fall behind competitors.

If there was a way to develop in a modern framework that not only excelled when it comes to creating websites, but also allowed for the same code and skills to be reused to create cross-platform apps, would you use it?

How to be More Efficient When Developing

Progress NativeScript is a cross-platform framework and allows for true native apps to be built from a single code base, while still enabling the productivity advantages familiar to hybrid approaches.

Therefore, the developers only need to know one language to get true native performance and functionality across platforms. However, the language can be JavaScript, TypeScript, and in this case, Angular.

Angular 2, the full-platform successor to Google’s Angular 1 web application framework, is based on newer JavaScript standards, bringing a better, faster, more powerful framework to developers across the globe. Angular 2 has been developed and optimized for productivity and performance. It tends to work best in non-trivial applications – apps that have 10 or more views, or deal with a significant amount of data. But when used properly the framework allows for the deployment of the fastest, smallest applications across web and mobile environments.

NativeScript does not require Angular, but it’s more effective when used in tandem. In doing so you can fully reuse skills and code from the web to build beautiful, high performance native mobile apps without web views. One of Angular 2’s biggest architectural changes was decoupling the Angular framework form the DOM. While Angular 1 was limited to browser-based environments, Angular 2 opened the door for a number of different rendering possibilities, including NativeScript.

Together, the collaboration between NativeScript and Angular was created to provide an answer to the question above. Here are some tips to get the most out of Angular 2 and NativeScript: 

Standardize on Angular 2 to Simplify – It’s One Less Thing to Learn.

When tasked with supporting multiple languages, it’s easy to understand the complexities involved, both in development and recruitment. Standardizing on Angular 2 allows for a consistent technical architecture to let developers solve common issues in standard ways, enabling employees be more efficient. There are plenty of Angular developers in the world, so it’s also easy to find talent when needed.

NativeScript supports Angular 2 and allows for true native performance on mobile applications – without having to learn multiple native languages. By using native components, the framework offers a native look, which give users the experience they both expect and demand.

When it comes to developing, think of how much work you’d have to do to build simple Android and iOS apps using traditional native development approaches. In the case of a button, you’d have to take multiple steps across Android and iOS to accomplish what you need to. But with NativeScript and Angular 2, you can build that same button in a few lines of code; write the code in JavaScript/TypeScript; place the button in an Angular 2 component; style that button with CSS; install JavaScript modules to help you out from npm; and at the end of the day, there is only one code base to maintain.

Using Angular 2 in NativeScript also opens up another possibility: the ability to share code between web and native apps. NativeScript code is just JavaScript, so long as that code isn’t tied to the DOM, there’s no reason that code can’t run in NativeScript.

Keep Your Code Modular

If you keep your user interface code separate from your business logic, you have the ability to share large amounts of functionality across multiple platforms. For example, consider the common scenario of registering a new user in your application. This functionality usually involves sending data to a backend service through an HTTP call, and receiving a token in response. There is nothing about this code that is specific to an individual mobile platform, yet with traditional development approaches you’d have to write this code three times—once in Swift or Objective-C for iOS, once in Java for Android, and once in JavaScript or TypeScript for the web. With NativeScript and Angular 2 you have the ability to write a single Angular service that runs on all three platforms.

Not all code can be shared this way, and you will have to code the user interface twice—once for native iOS and Android, and once for the web. But if make an effort to keep your code modular, and keep code that doesn’t involve the interface in separate files, you have the potential to save a considerable amount of development time when writing apps that target multiple platforms.

Learn to Love TypeScript

Microsoft’s TypeScript is a superset of JavaScript that adds a number of new features, such as optional types. TypeScript offers benefits of particular interest to developers coming from Strongly Typed, or Object Oriented backgrounds. Some developers can find it to be intimidating, but NativeScript and Angular 2 are both written in TypeScript, and both teams recommend learning and using TypeScript in your own applications.

NativeScript is built with TypeScript, meaning there is a 100 percent integration with all NativeScript APIs and even all native APIs. NativeScript also means native apps, and native apps don’t handle code errors as well as a browser does. TypeScript provides developers with an extra level of confidence as they develop NativeScript apps by catching errors and possible type mismatches at build time that could otherwise result in app crashes down the road.

When combined with Visual Studio Code, TypeScript provides powerful refactoring capabilities. For example, you can change the method/property signature in seconds without the worry that the old name will stay somewhere in the project. Plus, TypeScript is also easily automatically configured. NativeScript CLI configures .tsconfig files and transpiles .ts files without any extra build configuration required. Simply build the project and Nativscript will handle the rest. Lastly, TypeScript has superb module support. Use the CommonJS modules or the ES6 module spec because it all works cohesively with TypeScript and NativeScript.

While familiarizing and learning the base, if you aren’t sure what a certain block of TypeScript code does, you can paste the code right in the box on the left hand side of the TypeScript Playground, and the corresponding JavaScript will be generated in the right hand box.

Embrace Each Platform

Your application does not have to look the same across iOS, Android and the web, and in fact, it shouldn’t. Each platform has its own unique paradigms that you can use to create the best possible experience for users. iOS users expect to be able to swipe and go back; Android users expect to be able to use the hardware back button, and web users expect to be able to use the URL bar and share links. NativeScript and Angular 2 allow you to cater to each of these scenarios by sharing code where it makes sense and customizing interfaces to your user’s needs when appropriate.

Open-Source That’s Easy to Trust

Angular 2 and NativeScript are both open-source frameworks, so the platforms are able to rapidly adapt and are supported by a wide community of over one million developers. Although some may feel that it is risky to embrace open-source because of stability issues, the collaboration between Angular 2 and NativeScript was designed to address this concern and put it to rest.

The Angular framework is also backed and promoted by Google, ensuring that there will be consistent support and a long life. In addition to the global developer community, there is also a more formal support team dedicated to long term innovation and success.

Moving Forward

The collaboration between Angular 2 and NativeScript is significant as it allows you to write once and deploy across multiple platforms. Developing across multiple platforms used to be avoided by developers, but by utilizing both Angular 2 and NativeScript, you can save both time and cost. As technology progresses and improves, the enterprise will always have to meet the needs and demands of the consumer, but when two frameworks are able to work seamlessly together for the foreseeable future, the lives of developers become significantly easier.

About the Author

TJ VanToll is a tech author, speaker, and a Principal Developer Advocate for Progress where he specializes in performance and mobile web. TJ has over a decade of web development experience, including a few years working on the jQuery team. Nowadays, TJ spends his time helping web developers build mobile apps through projects like NativeScript.

 

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Logical, but troubled by J Davenport

The native vs JS concept boils down to complexity. If you have a lot of navigation, you end up having a front end with a lot of OS specific changes. This makes the front end code more complex. Eventually it becomes a web of OS switch statements. Let's be honest, many apps are CRUD. The code to interact with storage is normally straight forward. The hard logic is probably on your server. The result is a complex view layer that is exactly native.

The better thing is to just be a polyglot. Switft makes life easier. Android isn't that much of a suck if you already know Java. Pick the platform you think will benefit you the most. Build for that. Then roll out.

Informative! by Marcus Miller

It can be a daunting task to develop content for various platforms and going through similar data repetitively, also reduces efficiency. This is a constant struggle for company owners to deal with while we wish to extract maximum output for our company without wasting time creating repetitive native content for various platforms. Creating hybrid content with the help of nativescript and increasing its efficiency through Angular 2 is very helpful. This also reduces the need to know multiple languages relevant on the web as well as mobile platforms without compromising the unique paradigms of these platforms.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

2 Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT