More updates have arrived from the Angular community. Join Sebastian Witalec, Minko Gechev, Thomas Burleson, Tara Manicsic, and Deborah Kurata as they discuss a number of exciting, new developments in JavaScript. Watch and read about NativeScript and its importance to mobile development, learn about Minko’s Ng-World, the Angular compiler, Angular flex-layout, Kendo UI components, and Angular modules.
Nativescript + Native Mobile Development
Why NativeScript is a Powerful Tool for Native Mobile Development with Sebastian Witalec
With additional interests in photography and futbol, Sebastian Witalec manages to remain active in the JavaScript community, specializing in NativeScript. Sebastian first found out about the framework through a friend who referred to it as hybrid development. He was immediately fascinated by the framework’s ability to function with both JavaScript code and native UI for building mobile applications. According to Sebastian, NativeScript was open sourced around February/March 2015. Because there was no Angular integration at the time, JavaScript (with xml) and CSS were used to create mobile applications.
Sebastian talks about how developers may go about creating NativeScript apps from scratch. He says, depending on the individual, he/she may be able to create a template with their native knowledge alone. With this template, they may proceed to creating plugins that work on iOS and Android following the same structure.
He mentions that the great thing about devs who create components from scratch are that they are usually the individuals who are willing to give back to the community. Sebastian gives more insight into plugins, points on the benefits of having good integration with Angular, and pontificates on whether Ember has the chance to integrate with NativeScript.
Ng-World, Angular Compiler, and Automated Migration tool for Angular
Visualize Your Code in Minko Gechev’s 3D Ng-World and Learn About Angular’s Compiler
Enter an ng-world, where modules are seen as gardens and trees exist as components. Minko’s creation exhibits a 3D minecraft experience, built unconventionally using Angular’s compiler to visualize source code. Not only does it allow for you to walk around your own source code, it also judges the quality of your work.
Minko discusses the many benefits of Angular’s compiler including the ability to verify styles declared in components. This action alone helps decrease the bundle size of your app and comes with other benefits as well.
Currently, Minko is working on a tool for automated migration. With the release of Angular 4, ng-template was created. However, there comes the issue of having breaks in your source code when searching and replacing old templates, to turn them into ng-templates. This is how Minko came up with the idea to create a migration tool, which combined the compiler and static code to help with the process. Minko also explains how the compiler can transform an application to a more efficient version of itself.
Minko finds himself attracted to the Angular community due to his passion for statically typed languages like TypeScript, as well as his strong admiration for Angular and its platform.
Angular Flex-Layout
Learn about Angular Flex-Layout with Angular Material Lead Thomas Burleson
Thomas Burleson is the team lead for angular material, an instructor for ThoughtRam, and the architect for Angular Flex Layout. He identifies layout as one of the challenges developers face when using Angular to build applications.
When an application’s functional layout has been established, a UI experience must be created. This process is dependent on both animations and components. It is also important to consider how range and size are going to adjust based on the changes of the browser window.
Previously, Angular animations had been serving as the intuitive API for developers in animating their experiences. Angular Flex library came out afterwards as a library that would allow developers to layout apps across multiple devices.
Flex Layout was the second or third generation attempt to provide an alternative to CSS. Flexbox CSS ended up being the technology created which could identify how pages should flow on a page (horizontally vs. vertically) and how components should resize w/ respect to each other.
As helpful as this library is, it does have some intimidation factors. If an individual is uncomfortable using CSS, they must familiarize themselves with the style sheet language. Once they’ve accomplished this challenge, they are required to learn the specifics of Flexbox CSS.
Thomas elaborates on the objectives, the issues, and the features that came with developing Flex Layout. He describes the library’s API and what directives to use, as well as responsive features included to make the library better. He also answers whether or not Angular Material 2 is supported and whether developers can start using Flex Layout right away. Although new features are being worked on for the library, and there are a number of issues still waiting to be resolved, Thomas urges individuals to use the library as it is easy to use and very helpful.
Native Components for Angular — Kendo UI
Kendo UI- Custom Native Components for Angular with Tara Manicsic
If you’ve ever wished you could make robust applications quicker, your wish has just come true. Kendo UI, released this year by Telerik, a Progress company has created pre-built, fully functional, native components for Angular.
Kendo UI components are built from the ground up so you are able to take advantage of functionalities such as tree shaking or universal rendering immediately. Some of the more popular components that enable Angular developers include the grid and charting components.
Grid was made to organize data that clients bring in and gives them the ability to manage how they want to view, sort, and page the information. It has a thorough API which gives creators more freedom to customize and change their applications. Grid is becoming more robust as greater features are added to it.
Chart components help with visualizing data quickly and is easy to integrate into existing code. The components can be installed module by module and added to a developer’s existing template. The chart refreshes with new data every time it is inputted.
Both of these components in particular can change a lot of the interactions users are doing and are great examples of how Kendo UI enables Angular developers to build more robust applications faster.
Modules, Lazy loading, and Bundles
ES2015 Modules vs. Angular Modules with Deborah Kurata
You may wonder about how ES2015 modules differ from Angular modules. We interview Deborah Kurata and she explains the details and differences between the two.
With ES2015 modules, developers can now create a code file and import or export from it using import and export statements. ES2015 modules sit at the micro level and are simply files. Meanwhile, Angular modules are more macro and provide a method for breaking up applications into big chunks with each containing the information an application needs to carry out its function.
The best way to take advantage of Angular modules to start with an app module. This particular module holds an application together and can get too big as a developer builds out their application. When this occurs, it is important to begin breaking up your application into smaller, separate modules. Sometimes, these are referred to as feature modules.
Creating feature modules is beneficial because many individuals use Angular to build enterprise-wide applications and need the flexibility to break their application into smaller pieces so they can better manage and keep track of the things various teams are working on. Additionally, utilizing Angular modules and lazy loading them into your application as separate bundles can and should improve overall performance of an application.
We hope you enjoyed this article. For more information on Angular, be sure to check out http://angular.io.
This article was co-written by Trinh Kien and Tracy Lee
Need JavaScript consulting, mentoring, or training help? Check out our list of services at This Dot Labs.
Top comments (0)