> Markdown version of [/videos/122-unleash-your-web-skills-on-native?t=394](https://www.wearedevelopers.com/videos/122-unleash-your-web-skills-on-native?t=394). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Unleash your web skills on native!

Want to build native mobile apps without learning Swift or Kotlin? Discover how NativeScript translates your existing HTML, CSS, and JavaScript directly into high-performance native UI components.

- **Speakers:** [Rowdy Rabouw](https://www.wearedevelopers.com/@rowdy-rabouw)
- **Event:** WeAreDevelopers LIVE
- **Published:** March 23, 2021
- **Duration:** 52:01
- **URL:** https://www.wearedevelopers.com/videos/122-unleash-your-web-skills-on-native

## Summary

Transitioning from web developer to mobile engineer often involves a steep learning curve requiring mastery of entirely new languages like Swift, Kotlin, or Objective-C, along with complex native tooling. NativeScript eliminates this barrier by allowing developers to leverage existing HTML, CSS, and modern JavaScript skills to build truly native, cross-platform mobile applications. Unlike hybrid solutions that merely wrap web views inside an app, NativeScript cross-compiles standard web markup and layout constructs—such as Flexbox and Grid—into actual native UI components for both iOS and Android. This provides a native look, feel, and performance while keeping the development experience grounded in familiar front-end paradigms.

A standout technical advantage of this framework is its framework-agnostic approach, officially supporting Angular, Vue, Svelte, and React. More impressively, developers bypassing traditional plugin constraints have the unique ability to write raw Objective-C, Java, or Kotlin directly within their JavaScript or TypeScript files. This direct API access means that manipulating underlying iOS or Android UI states never requires writing custom C++ bridges. Standard web styling is also fully preserved, allowing developers to use CSS for everything from applying custom app themes and gradients to writing cross-platform CSS animations.

Extending mobile capabilities becomes highly streamlined by tapping into three massive ecosystems at once: NPM for JavaScript packages, CocoaPods for iOS libraries, and Android Arsenal. Practical implementations of this architecture range from effortlessly managing mobile app localization using tools like ngx-translate to directly interfacing with device hardware. Real-world applications can easily bind to custom NativeScript plugins to access native functionality to capture device accelerometer data, utilize device speech recognition, and establish real-time Bluetooth connections to control physical IoT hardware.

**Keywords:** nativescript framework, cross-platform mobile development, true native ui components, javascript direct native access, mobile app frontend integration, native objective-c in typescript, mobile app localization, ngx-translate implementation, custom nativescript plugins, mobile flexbox layout systems, cross-platform css animations, bluetooth hardware integration, mobile speech recognition apis, device accelerometer usage, npm ecosystem in mobile

## Chapters

1. **Challenges for web developers transitioning to native development** (00:00) — The learning curve and obstacles faced when moving from standard web technologies to native mobile platforms.
1. **Choosing a framework for cross-platform mobile application development** (03:15) — A breakdown of available frameworks based on budget, performance needs, and existing technology preferences.
1. **Core concepts and architecture of the NativeScript framework** (06:34) — How open-source tools compile web languages into truly native iOS and Android application components.
1. **Constructing user interfaces with native UI elements and markup** (08:44) — Defining platform-specific buttons, text fields, and form inputs using standardized markup tags.
1. **Arranging interface elements with supported layout containers** (12:22) — Utilizing layouts like stack, dock, grid, and flexbox to predictably position application views.
1. **Styling mobile user interfaces using familiar CSS properties** (15:07) — Applying platform-specific styles, animations, and pre-built core themes to style application components.
1. **Building applications using popular JavaScript component frameworks** (18:26) — Integrating libraries like Angular and Vue while seamlessly invoking underlying Objective-C platform actions.
1. **Extending app functionality with node packages and native libraries** (25:40) — Incorporating external modules such as translation libraries for seamless application internationalization.
1. **Developing and importing custom functionality plugins for specific tasks** (29:08) — Writing distinct plugin files to extract device package information from native Android and iOS operating systems.
1. **Operating device hardware interfaces within a functional native application** (33:40) — Connecting to external bluetooth devices and interpreting phone accelerometer signals to control physical hardware.

## Related Moments

- [Transitioning to React Native from web development](https://www.wearedevelopers.com/videos/274-making-the-switch-from-web-to-mobile-development) (from "Making the switch from web to mobile development")
- [Transitioning from frontend web development to mobile environments](https://www.wearedevelopers.com/videos/278-there-s-an-app-for-that-on-the-role-of-cross-platform-development-in-the-app-development-ecosystem) (from "There's an app for that - on the role of cross platform development in the app development ecosystem")
- [Shifting interactive components to native web platform features](https://www.wearedevelopers.com/videos/285-the-lean-web) (from "The Lean Web")
- [Origins and architectural capabilities of the React Native framework](https://www.wearedevelopers.com/videos/556-the-perfect-ci-cd-react-native-pipeline-with-fastlane) (from "The perfect CI/CD React Native pipeline with Fastlane")
- [Evaluating cross-platform frameworks and developing open-source native plugins](https://www.wearedevelopers.com/videos/556-the-perfect-ci-cd-react-native-pipeline-with-fastlane) (from "The perfect CI/CD React Native pipeline with Fastlane")
- [Transitioning developers from React web to React Native mobile](https://www.wearedevelopers.com/videos/448-challenges-of-building-react-and-react-native-apps) (from "Challenges of building React and React Native apps")

## Related Articles

- [Native Web Apps: Are We There Yet?](https://www.wearedevelopers.com/magazine/83-native-web-apps-are-we-there-yet)
- [Cross Platform Mobile Development Frameworks to Use in 2025](https://www.wearedevelopers.com/magazine/404-cross-platform-mobile-development-frameworks-to-use-in-2025)
- [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering)
- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)

## Related Jobs

- [Senior React Native Developer](https://www.wearedevelopers.com/jobs/ext/1518176-senior-react-native-developer) at **Almedia**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [Agile Full Stack Engineer](https://www.wearedevelopers.com/jobs/48325-agile-full-stack-engineer) at **synava GmbH**
- [Senior Full Stack Engineer](https://www.wearedevelopers.com/jobs/48289-senior-full-stack-engineer) at **Sensory-Minds GmbH**