Coming Soon: Angular Support in Titanium

0 Flares 0 Flares ×

We are excited to announce that you will soon have a new way to write Titanium apps. Get ready to harness the cross-platform power of Titanium with Angular!

Titanium as a New Platform for Angular

Thanks to Angular’s modular architecture and the possibility to introduce platforms other than just the browser, we chose Angular to give you an additional development kit for creating Titanium apps. You will be able to take full advantage of Angular features and concepts like modules, components, dependency injection and routing – all topped with easy access to Titanium in templates, and of course in TypeScript.

Example Component

Let’s take a quick look at an example from our KitchenSink application we are currently porting from Alloy to Angular. The template for a list view looks like this with Angular:

<Tab title="Controls" ios:icon="images/icons/controls.png">
   <Window title="Controls" barColor="#1976d2" [titleAttributes]="{ color: '#FFF' }">
       <ListView (itemclick)="openItem($event)">
           <ListSection>
               <ListItem title="Views" itemId="views"></ListItem>
               <ListItem title="Label" itemId="label"></ListItem>
               <ListItem title="Tabbed Bar" itemId="tabbed-bar" *platform="'ios'"></ListItem>
               <ListItem title="Toolbar" itemId="toolbar" *platform="'android,ios'"></ListItem>
               <ListItem title="Command Bar" itemId="command-bar" *platform="'windows'"></ListItem>
               <ListItem title="Switch" itemId="switch-control"></ListItem>
               <ListItem title="Stepper" itemId="stepper" *platform="'ios'"></ListItem>
               <ListItem title="Slider" itemId="slider"></ListItem>
               <ListItem title="Activity Indicator" itemId="activity-indicator"></ListItem>
               <ListItem title="Picker" itemId="picker"></ListItem>
               <ListItem title="Alert Dialog" itemId="alert-dialog"></ListItem>
               <ListItem title="Option Dialog" itemId="option-dialog"></ListItem>
               <ListItem title="Text Field" itemId="text-field"></ListItem>
               <ListItem title="Text Area" itemId="text-area"></ListItem>
           </ListSection>
       </ListView>
   </Window>
</Tab>

All Titanium views are exposed as elements that can simply be used in any template. Note the special *platform directive, which allows you to only render elements on certain platforms (as many of you already know from Alloy). Assigning properties/attributes or binding event handlers is done just the way you are used to from Angular.

The corresponding component for the above template is also pretty straightforward:

@Component({
   selector: 'ControlsTab',
   templateUrl: 'controls.component.html'
})
export class ControlsComponent implements AfterViewInit {

   @ViewChild(ListSectionDirective) section: ListSectionDirective;

   constructor(private router: TitaniumRouter) { }

   ngAfterViewInit() {
       const listSectionProxy = this.section.listSection;
       const items = listSectionProxy.items
       for (let i = 0; i < items.length; i++) {
           const item = listSectionProxy.getItemAt(i);
           item.properties.accessoryType = Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE;
           listSectionProxy.updateItemAt(i, item);
       }
   }

   openItem(event) {
       this.router.navigate(['controls', event.itemId]).catch(e => Ti.API.error(e.message));
   }
}


We access some of the component view’s children and make use of Angular’s constructor injection to get the instance of our special Titanium router.

If you already know Angular, this should all look pretty familiar to you. And if not, consider using the time before our first public preview release to dive into Angular using their awesome docs & tutorials. Then, jump right back into the action and combine your Titanium knowledge with Angular with our upcoming technical preview.

Technical Preview and Roadmap

We think this is an awesome new feature and want to hear your feedback as soon as possible. So, we are planning to release the first technical preview by the end of February. This first preview includes the latest state of our Titanium platform for Angular with support for most major Angular features as follows:

  • Use all Titanium elements in Angular component templates.
  • Handle navigation throughout your app with the Angular router.
  • Services with updated APIs for some commonly used workflows like alert dialogs (including confirm and prompt dialogs), modal views, accessing device environment and global enums and constants to better fit Angular’s architecture.
  • New project template available with appc new –ng
  • Fully integrated into the existing CLI build pipeline.

Two important features that are not directly tied to Angular will be missing from the first technical preview: support for incremental builds using live sync / hot module reloading and the use of CSS to style your components. We aim to include these in a later release.

Although we are quite confident with the progress made so far, remember that this will be an early stage preview and is under ongoing development. With your feedback on our technical previews, we aim to target the first stable release by the end of 2018.

Stay tuned!

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×

20 Comments

  1. This is a big step forward, well done.
    Either improve Alloy or use something like Angular, ReactJS, Vue.js, Ember.js Meteor.js… make sense.
    ES6 support, state management, routing… are all big needs from a Javascript point of view.

  2. Georges

    This is spreading around the office and was thrilled. A Great Leap Forward, now we feel more confident in diving more into Angular 5.
    Thanks to the Axway/Titanium team!

  3. Carlos Eduardo

    Well done !!!
    Great News for the community !

  4. Ophir

    This is great news! This will bring the power of TypeScript and Angular to Titanium.
    The things I have concerns about are:
    1. What about Alloy? Will it still be continued?
    2. Angular has some setback in performance – When I played with NativeScript that has 2 options – one “vanilla js” and the other Angular – Their Angular based apps were 2 times slower than “vanilla” ones.
    3. Will it be possible to port existing Alloy/Classic apps to Angular?

    • Hey Ophir, thanks for your questions! Answering in order:
      1. Alloy will still be continued and improved. Angular will be one of the new platforms, but not as a replacement but optional choice. Alloy v2 comes this year as well, including latest libraries (moment, backbone, lodash, …) and ES6+
      2. We are in the progress of measuring performance. Do you mean performance during build or run? As our Angular framework compiles down to vanilla JS, I don’t expect much performance issues on that side
      3. Not automated tools planned so far, but there will guides and documentation how to work between both

  5. jason

    I have been using titanium since the very beginning and also good with Angular, however I don’t quite get the benefit of mixing these two.
    Will this new framework reduce the gap between iOS and android coding?
    For example, will the angular route work for both platform?

    • Hey Jason, thanks for your comment! All Angular functionalities work cross-platform (iOS, Android & Windows). It’s not a web-view based solution but actually compiles down to native Titanium code. It enables you to structure your project like you already do in the web, making it easier to adapt the native platform capabilities without learning Alloy.

      • jason

        If the angular framework will help reduce the gap of iOS and android, I think it is worth going that way. Currently, still quite an effort is spent on dealing with platform dependent coding. Navigation is one of those

    • Sunil

      Awesome! I was just trying to find out something I can do more native out of my angular knowledge. I have done lots of ionic 2/3 last year and believe me it is awesome. But then the browser story makes it a bit sluggish on clicks, navigation etc. So, now I was trying to find a better alternative that could give more native feeling and stumbled upon nativescript and using it since 4 months from now and it is great too. In fact Angular gives more power to its users with its own APIs of routing, DI, data binding etc which all makes sense. I have not touched Titanium till now but I am sure that Angular flavour of titanium would be a great recipe to make awesome native apps in recent times to come. I will surely give it a try once the Angular version is out. Congrats! and all the best {{ titanium }}…

      • Sunil

        Wrongly posted as a reply.. it should have been a new comment

  6. Cristi

    Great news. I’m using Appcelerator for 4 years now. Do you have an aprox. date for this?

  7. Cesar Estrada

    Why can’t you first finish KitchenSink with Alloy; instead of “porting” it once again to another architecture???

    For years I’ve tried to stay away from Angular because of the steep learning curve, slow performance, etc. (According to some articules).

    And also, because I didn’t want to “contaminate” myself with yet another way to structure my code.

    And now, your are going to use it !!??

    • Cesar Estrada

      And don’t forget Hyperloop…

      Why don’t you create courses, blog post or even a KitchenSink with Hyperloop???

      There is practically no good and clear information of how to use Hyperloop with real world examples.

      And the ones that do exists, are very complex with no explanation of the basics of HL.

    • Cristi

      You can choose not to use Angular, and continue with Alloy or the classic way

  8. Raymond Verbruggen

    Please, please consider something else than Angular…

    My personal opinion…

    Being an electronics and software developer for 30+ years, one of my major concerns is to keep up with technology (r)evolution on one hand. On the other hand I need to make good choices for example regarding development tools and languages in this big technology landscape.
    And maintainability is a major keyword for my work.

    So I have been using Appcelerator since 2012 and especially Alloy was a major step forward. Must honestly say that maintaining old Classic apps is not a punishment but that’s another story. Luckily it is still javascript.

    Done quite some web projects with AngularJS (the 1.x chain) and was reasonably happy with that. Despite the error prone syntax, difficult debugging, and dependency injection (who wants that?).
    Then Angular2 came along and first I was excited and I seriously wanted to switch. For example typescript would be a logical next step. But I was extremely disappointed by the unnecessary complexity and many more reasons.
    And with me lots of other developers. So I stayed working with AngularJS, did not want to make a step backward.

    For app development I also briefly looked at platforms like Ionic. It has some disadvantages, one of them because it is webview based, but you might say “okay who cares for simple apps?”. The main reason for me stay away from Ionic however was that it is based on Angular.

    I am not a fan of React mostly because it’s using JSX.

    Then there was VueJS. What a thrill is working with VueJS. One of the best things that happened in the javascript world for years! And I am not alone in that opinion, there are a lot React-Angular-Vue comparison articles on the web… read them!
    If you take a look at how VueJS has developed itself recently, especially compared to Angular. A lot of people are leaving Angular in favor of Vue.
    Vue is javascript based but typescript is supported as well. Blazing fast. Super flexible. So easy and transparent to learn, to use and maintain existing projects.

    Thinking about future roadmap for Titanium to me Angular is not the big step forward. There are much better alternatives. Especially VueJS.
    Could be that Axway has a lot of Angular developers and that is the main driving force…
    But please don’t drag us into Angular.

    PS: I am not going to leave Titanium, but I was surprised about the number of hits when I googled for “ionic vue.js”. So there is also something happening…

    • My congratulations for that initiative, that will make more people join the cause. But I totally agree with the Raymond, until now the only framework with clear ideas has been Vue.js, about Angular version 5 looks very good, but it has been horrible the changes it has given, making it something easy in something difficult in Javascript.

  9. Steve

    I have been working on my own Titanium framework to use ES6 for the past few months (still work in progress) and just released an initial npm module (https://www.npmjs.com/package/magnium). Maybe I should start looking at Angular instead, are there any dates for release?

    • Hey Steve, great project! Titanium 7.1.0 (the next feature version) will include built-in ES6 support using Babel. But apart from that, you will still have the option to either use Vanilla JavaScript (classic Titanium), Alloy, Angular or own compiler (like React and Vue). The GA release is planned for later this year, with a technology preview around end of February.

  10. ngita

    Great news for others, not too much for someone like me, may be we could continue to use alloy and the old tricks but introducing angular is not our priority. Why not introduce flexbox for example or other tricks to improve ui?

  11. Luiz

    Just one thing: congratulations!

Comments are closed.

Sign up for our blog!

computer and tablet showing Appcelerator software
Start free, grow from there.
0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×