Virtual reality, a dream of science fiction writers for decades, is the closest to a true reality than it’s ever been. Multiple headsets are on sale to consumers, and while some aren’t exactly affordable to the common person, such as the HTC Vive or the Oculus Rift, and others work better than others,the upcoming years will only bring more innovation to the industry.

This isn’t limited to just video games either, although that is certainly the biggest market for VR right now. People across different media are using the technology to tell stories and take users on journeys into far away places. For many of us, affordable, viable VR is still a few years away, but we can sit back and appreciate the efforts of others who want to make these experiences as broad as possible.

1. Journalism

With online publications searching for new ways to engage with readers, it’s no surprise that some eventually turned to virtual reality. Places like the New York Times and the Des Moines Register have experimented with the effects that putting a viewer in a certain location could bring. When it comes to talking about VR, one of the ultimate goals is providing users with a genuine-feeling sense of place, which journalism can utilize to tell stories. In the case of Project Syria, an experience created at the USC School of Cinematic Arts, viewers can step inside a refugee camp and look around. Nonny de la Peña, who worked on Project Syria, told the Columbia Journalism Review that it packs an emotional punch because of the empathy users can feel being in a VR environment.

2. Teaching

Years ago, during my first Oculus Rift demonstration ever (back when it was more nauseating than awe-inspiring), I experienced something called “A Slower Speed of Light,” which was created by members of the MIT Game Lab. It wasn’t a game, but rather a first-person experience that exhibited special relativity by slowing down the speed of light. VR can be used similarly in the classroom to visualize certain concepts for students, especially when it comes to physics. Even back in 2009, teachers were speculating about whether VR could be used to accentuate one-on-one instruction.

3. Health care

According to a May forecast on the expansion of virtual and augmented reality in health care, the value of the virtual reality market is expected to grow by nearly $1.9 billion by 2020. There are so many applications for VR in this field that it’s kind of mind-boggling. Researchers at the University of Louisville experimented with VR to treat anxiety disorders and phobias, while some at Stanford University used it to set up practice spaces for surgeons. As the medical industry moves more online, the applications for VR will only continue to grow.

4. Porn

This seems like the obvious one and it was only a matter of time before the adult film industry got their hands on the hardware. In March,Pornhub launched a free VR channel that featured 360-degree videos, with people in environments interacting with the user. While some things about sexual relationships can’t cross over digitally, such as body heat and breath—according to Nathan Grayson over at Kotaku who tested out VR porn last year—pairing devices with haptic feedback tools that can provide tactile sensations can increase those feelings of authenticity.

5. Practicing religion

On the other end of the spectrum we have religion, which can utilize VR in the same way that both porn and teaching do: by providing a space where people can interact. Rev. Christopher Benek of the First Presbyterian Church of Ft. Lauderdale in Florida said that VR can be used for those who live in rural areas or who are confined to their homes (although how many of them will be able to afford VR headsets is another issue). By setting up virtual churches, people can potentially feel like they are a part of a community without actually being there.

6. Entertainment

In 2015, the Oculus Rift introduced a Netflix app that allowed users to watch movies in a virtual theater complete with a sofa, big-screen TV, and ambient lighting. We’re only just beginning to see the ways that VR can play around with typical movie-watching experiences, as it’s the next step from 3D and IMAX. The film industry has been playing around with viewer immersion since 3D glasses were used in 1950s theaters, with amusing attempts such as smell-o-vision failing to grab audiences. It’s less that VR can make watching movies or TV more exciting, but rather it can provide an alternate environment to watch them in. Imagine if you could go to a virtual theater without having to leave your home, for example, or if you could be at a conference with other fans.

7. Space exploration

Many of us alive today probably won’t experience the realities of space exploration at all, let alone in the next few decades, as scientists work to get the first man on Mars and improve technologies for longer journeys. VR is a decent substitute for 2016, with organizations such as NASA releasing things like a panoramic Mars viewer that places you directly on the Red Planet. This can be a great educational tool for students and provide a direct view of the places that so few of us will get to go in this lifetime.

8. Museums

In the same way that VR can implant us into the future, it can also go in the opposite direction. The British Museum already used the technology to transport visitors into the Bronze Age, and there are more ways that museums can create virtual exhibits. Tours in some of the world’s most famous museums can help those who wouldn’t be able to ever travel, while others can provide experiences you couldn’t get in a crowded, museum setting. It can also help people to travel to historical landmarks, such as the White House. Now we just need a way to make the White House tour more interesting.

9. Credit

web : http://gizmodo.com/8-ways-virtual-reality-is-for-more-than-just-video-game-1779486925

1 Introduction

I like Apple. And I really like to develop native iOS Apps with Obj-C or now Swift, as it just feels right to me. But in the end you are standing there with a wonderful iOS App, for iOS phones and/or tablets and that’s it. At this point you could be happy, but think about this:

You are not targeting about 80% of the market!

And if you want to reach a greater audience because your customers are asking for it, or because you don’t want to miss the income from the millions of possible users, you will need to make your app available on at least one other, if not more platforms. Now the rage begins. That’s because in order to target (which dominates the global market, you will have to deal with Java (ugh) and learn the Android SDK, or hire someone else who can. Either way, as a result, you will end-up with at least two code bases to maintain, which will be a pain in the ass over time.

Enter hybrid development, which, among other things, eases your complexity by keeping you down to a single code-base for multiple target platforms like iOS and Android. In a nutshell, hybrid development involves developing apps as Web apps that run in a browser, and then wrapping them in such a way that they run as native apps on mobile operating systems like iOS and Android. In addition to the resulting single code-base which greatly simplifies management of your app’s lifecycle, the hybridized versions of the Web app can be registered with Apple’s App Store and Google’s Play Store (something that’s not possible with just a Web app).

This article aims to show you how and why you should stick to the hybrid approach in your next mobile application project.

1.1 Welcome to 2015

First of all, congratulations! We are in 2015 and this means you are way better of then 5 years ago, when hybrid development began to raise as a very promising area. The problem is, it was so shitty at that time, all the crappy apps have been burned into the minds of people which lead to preconceptions all around the globe.

Let’s leave all those thoughts behind, open your mind and I promise you won’t regret it.

1.2 Frameworks, Frameworks everywhere

It starts with the decision which framework to go with. They somehow sprout like mushrooms, and it might be hard to pick the right one. You could read infinite articles, consider your programming language background or analyse the cost and value of each.

Or, you could just open your eyes and think for a moment, what might be the most stable, promising and free web framework? AngularJS.

And which hybrid framework is free and gives developers all opportunities they need while having a huge fan base? Cordova.

Let’s combine those two awesome frameworks and you get? Ionic!

1.3 Why Ionic

Ionic combines AngularJS (JavaScript by the way) with HTML5+CSS and uses Cordova to access native device functions. Moreover it’s free, the fanbase and support is growing every day and finaly the team behind Ionic is awesome. Just check out theirside projects and you know what I mean.

So all in all, Ionic offers great possibilities to build hybrid apps which not only look awesome, but which also behave as natural as a native app and rely on one shared code base. And if you a scared of JavaScript, it’s not as bad as you might think. Give it a chance!

The next parts of this article will highlight how Ionic Apps can replace most of what you daily use in iOS Development. We will see how to easily substitute well-known components from native iOS development with HTML5 and JavaScript, how the structure looks and what you can achieve with the hybrid approach.

2 Comparing native iOS with Ionic

To show you the transition from iOS to Ionic we will go through the most important areas, however, if you already want to try Ionic I can recommend the Ionic getting started guide.

2.1 Structure

When you start your Ionic project, you will find many files which might irritate you in the beginning. Remember how you started your fist Xcode project? I guess that was a hell of file overload as well.

Let’s take a short look at the config parts:

• package.json lists the used NodeJS modules
• bower.json lists the used Bower packages
• config.xml has all the properties for your created cordova project
• gulpfile.js describes GulpJS build tasks

Those files are the base for your Ionic project. They are not very different to any other AngularJS application you might have seen. Additional you have some folders:

• hooks/ Not that important in the beginning,contains scripts which run at specific points of the workflow.
• plugins/ your installed cordova plugins
• www/ this is where the magic happens!

Most of the time you will just work in the www/ folder, because your app’s code is in there. The folder is just like a web project, you could serve it with any server and see your app inside a normal browser. Almost ever you will start with the index.html orapp.js inside that folder, which are like the backbone of your app.

2.2 Layout

As an iOS developer, you can either use the Storyboard/xibs to create the user interface, or you can just do it in the code. Either way, you have great options for using autolayout to guarantee your app looks and behaves just as you wish on different screen sizes, although there are only a bunch of sizes.

If you switch to Ionic, you will in general have all the layout in HTML files, which means you are best of with using relative sizes. The general markup looks like this:

<body ng-app="myApp">
  <ion-content>
   <ion-nav-view></ion-nav-view>
  </ion-content>
</body>

It’s not very different to HTML, you might need to get used to some custom tags from Ionic and AngularJS which will simplify your development dramatically! For me, it’s a lot easier to create the general layout fo my app inside HTML than with some xib file in Xcode. But you can decide for yourself whether you like it or not. Just remind the hell on earth for a moment: Xcode Constraints.

Besides the HTML, you also have some JavaScript files (please don’t think of the JavaScript from some years ago) which control your app and can change the views as well.

Ionic makes it so easy to deal with different screen sizes, it’s almost fun to develop and see your app running so smooth on all kinds of devices.

2.3 Navigation

For now you have seen enough of the general stuff. Let’s look at some code and see Ionic in action. This section aims to show you some core concepts, it is not meant to be read as a step-by-step tutorial. For things like that take a look at the official Ionic Page or read on my blog Devdactic.

States

The routing of pages happens through states in Ionic, which are configured for URLs. This means, you can specify different states, child states, abstract states and so on in your app.js like this, which will be loaded to your index.html inside the ionic-view:

$stateProvider
  .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

Additional you can already set the template file which belongs to a state and the regarding controller. In Xcode, the templates would be your xibs and the controllers the UIViewControllers of your app.

This state concept is sometimes tricky and might be hard to understand, but it’s definitely one thing: A very good overview about all the possible states of your app! Something Apple tried to achieve with the storyboard, but I’m not sure how many people really use it all the time.

Tab bar

The tab bar is well-known to every iOS developer, and with states and Ionic it’s not hard to define it:

<ion-tabs class="tabs-positive">

  <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>

</ion-tabs>

As you see, you can define all the things you need right inside your HTML. It might look a bit like magic at first, but when you start with Ionic you will get used to it. Furthermore, the whole view/templating/replacement philosophy comes in most parts from AngularJS, so if you are a bit familiar with that, that’s a big point for you!

Navigation controller

To get a UINavgationController you have to set some delegates and a bit of logic. With Ionic? Well, besides these few lines and setting the states and parent states of your app correct not very much!

<body ng-app="myApp">
  <!-- The nav bar that will be updated-->
  <ion-nav-bar class="bar-positive">
  </ion-nav-bar>

  <!-- Where your views will be rendered -->
  <ion-nav-view>
  </ion-nav-view>
</body>

You get the navigation bar pretty much for free, you don’t have to care about how the history works at this point. The big point here is, you could take care of that if you like to! Almost all of those elements can be accessed from your controllers by injecting the matching delegate:

function MyCtrl($scope, $ionicNavBarDelegate) {
    // Do whatever the $ionicNavBarDelegate delegate offers 
}

The delegation pattern should be very familiar to you as an iOS developer I guess. So this is another option on how to send messages between your view and controllers.

Side menu

There are more cool layout features, for now let’s take a last look at one which is well-known as the Master-Detail pattern in iOS development. The side menu is a painless side menu which you can either pull in and out, or have it open on pad size devices all the time. The code would look just like this:

<ion-side-menus>
  <!-- Center content -->
  <ion-side-menu-content ng-controller="CenterContentController">
  </ion-side-menu-content>

  <!-- Left menu -->
  <ion-side-menu side="left" expose-aside-when="large">
  </ion-side-menu>
</ion-side-menus>

That’s everything you basically need to get a sidemenu, pretty awesome right?

These were just some very simple rough examples of the code you need, but trust me, there a no hidden secrets, you will get a layout and a decent result ver, very fast.

2.4 Appearance

The appearance of an app is the most important part in general. the iOS SDK offers many ways to get standard objects, which you have to customize most of the time if don’t want your app to like a boring normal app without style.

Ionic offers some great way to get the same results in nearly no time, so read one for some example components.

Tableview

The UITableView is often used for displaying a lot of data. Setting up all the delegates, data source and most of the time custom UITableRows can be a real pain. Just take a look at the next few lines for an Ionic tableview with 2 static rows:

  <div class="list">
  <a class="item item-icon-left" href="#">
    <i class="icon ion-mic-a"></i>
    Record album
    <span class="item-note">
      Grammy
    </span>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-person-stalker"></i>
    Friends
    <span class="badge badge-assertive">0</span>
  </a>
</div>

The result looks like this:

Obviously static rows won’t be used very often, but adding a controller to it which iterates over an array of objects is no problem with AngularJS at all!

AlertView

The UIAlertView is very handy for displaying errors or something similar to your users. Problem again here, it looks not very nice. The next few lines are all you need with Ionic..

var alertPopup = $ionicPopup.alert({
     title: 'Looks good!',
     template: 'I hope you like Ionic'
   });

..to get an already good-looking alert pop up like this: You can always change the appearance of all your components, but we will come to this point later.

Gestures

Catching gesture input on your views is often mandatory to perform or prevent actions. If you think a hybrid framework is missing this feature, you are wrong (in case of Ionic!).

In my eyes, it’s even more easy than with native code, because this is all you need to catch swipe left event on something:

<button on-swipe-left="onSwipeLeft()" class="button">Swipe me left</button>

The same directive can also be applied to other elements like your content or whatever you like. Remember that you are running your app in a webview, and you still have all those native functions that easy!

Styling/CSS

One of the biggest benefits is how fast you can style your complete app. When using buttons, navbars or other controls you can take predefined Ionic classes which can be great, or you can simply override those elements to have your app completely redesigned (regarding colour and CSS elements you can influence) in seconds!

As the team at Ionic is always working on solutions for problems like this, they already made a tool to create your custom style: Ionic theme editor Hopefully, this editor will soon be also available inside the Ionic creator tool.

Anyway, if you don’t like all that, you can still make your complete own design and apply it to your app.

2.5 Pitfalls

Of course there are problems, but you will encounter problems everywhere.

Ionic 1.0 is still not released, an there are open bugs. But if you work with it and follow their speed of development, you can be very sure that they are after every bug, plus trying to give more options to developers every day. If you still feel the need to talk to them, you can always reach them on twitter and they will help you out.

If you are a programming language fanatic, you might find JavaScript ugly as hell. It might not be the best language out at the moment, but with ECMAScript 6 in the near future, I believe the tides will turn very much. The well-known classes concept will make its way to JavaScript, and the code will look much cleaner.

If you don’t like AngularJS for whatever reason, you might also have a problem with Ionic as they work so strong together. In that case, I can only recommend you to think about AngularJS again, or if you still don’t like it to wait for React Native.

Although we are in 2015, hybrid apps can’t be native apps. Running in a webview always limits your behaviour and feeling a bit, but I am damn sure you won’t see the difference most of the time, and pretty sure you are using hybrid apps and don’t recognize it. If you are planning a 3D game or something with heavy graphics, I might recommend you more to Unity3D, but for most of all apps out there Ionic could definitely be the way to go.

3 Building your app

When it finally comes to building your app for distribution, Ionic comes with some tools which makes life a lot easier.

First of all, the Ionic CLI is great for the complete workflow of your app. Starting projects, adding cordova plugins, running and testing your app just works like you would expect it to do.

If you are looking for a complete CLI overview, take a look at my Ionic Cheatshet

I might have mentioned they are realling trying to solve problems. Take this for another example: Automating Icons and Splash Screens Creating Icons and Splashscreens for your app is such an annoying business, but they just solve this problem so you create one image and Ionic takes care of the rest.

When everything done, you can finally build your apps again with the CLI with your preferred options and platform:

ionic package [debug, release] [android, ios]

The team has designed the complete workflow from starting an app to building it, and they are even working on something which allows you to share your apps with friends without any profile errors: The Ionic view app

Of course, you can also open the created Xcode Project after building it from the command line, but it’s just nice to stay in one environment when developing something.

4 Conclusion and outlook

I still like building native iOS Apps. But more and more, I tend to just make it hybrid the first time. It just feels like any other app in most cases, and in the end you have an app for 2 platforms and 1 code base. The results are astonishing, and the moment you have the same app on your Android and iOS device without going through any real Platform specific struggles is amazing.

Ionic is still not released in version 1.0, but the current status, the speed of development and the expanding fan base on the Internet is a very good sign for a Framework, which could bring us a lot of fun in the next years.

Some of you will still hate hybrid frameworks, saying it will never feel like a native app. Ok you fools, go home. We’re in 2015 and Ionic is here.

5 Credit

From website : https://www.airpair.com 

Artical link : https://www.airpair.com/javascript/posts/switching-from-ios-to-ionic

---

Simon Reimler

---