The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

Screen Shot 2017-02-16 at 19.18.25

Over the last month, Manu has been working hard on adding an oft-requested and powerful new feature to Ionic apps: Split Panel.

With Split Panel, it’s now easy to show a responsive side menu with side-by-side navigation controllers that will display on larger screens (such as the iPhone 7 plus, tablets, and desktops) and collapse
on small screens (such as portrait mode on most smartphones). With independent navigation controllers, the menu side of the split panel can navigate independently of the content side, or they can work in concert. Finally, the menu side can be fixed or displayed as a side menu.

Feb-16-2017 19-15-43

To help test, install the latest nightly of Ionic (npm install --save [email protected]). For basic usage, simply wrap your <ion-menu> and <ion-nav> with the new <ion-split-panel> component:

<ion-split-panel>
  <ion-menu [content]="content">
  </ion-menu>
  <ion-nav [root]="rootPage" #content swipeBackEnabled="false" main></ion-nav>
</ion-split-panel>

See the e2e tests for a full example of advanced usage (API Docs coming soon). Note: Split Panel is only available on Ionic 2.x and above.


A major focus at Ionic right now is reducing the final bundle size of an Ionic app. One of the major file size offenders has been Ionic Native, which bundles a decent amount of plugin code into your app regardless of whether or not you’re using those plugins.

Ionic Native 3.x fixes this by moving each plugin into its own npm module. Just need the Camera plugin? Install the @ionic-native/camera package and then import { Camera } from [email protected]/camera' instead of from the legacy ionic-native package.

In our tests, this helped shave 15% of the final bundle size, which will help apps load more quickly.

Test it

To try out this new alpha version, remove ionic-native from your package.json dependencies, and instead add the plugins you need:

  "dependencies": {
    "@angular/common": "2.2.1",
    ...
    "@ionic-native/camera": "3.0.0-alpha.1",
    "@ionic-native/statusbar": "3.0.0-alpha.1",
    "@ionic-native/splashscreen": "3.0.0-alpha.1",
    ...
  },

Change your imports from ionic-native to match the new package format:

import { StatusBar } from [email protected]/statusbar';
import { Splashscreen } from [email protected]/splashscreen';

Thoughts?

Please let us know how this works for you in the comments below or by filing an issue on the repo.

This is one of many filesize and boot time optimizations in the pipeline for Ionic, so stay tuned!


ionic-2-final-header

Today, I’m incredibly excited to announce Ionic Framework 2.0.0.

Before we get into that, though, a little history lesson is in order…

Back in March 2015 the Ionic team was given a unique opportunity to take all the lessons learned building a mobile framework on Angular 1 and reimagine it for a new and fast approaching future of JavaScript and web technology.

At the time, we were immensely proud of what we built with Ionic over 2014. The framework helped create over one million apps, from serious enterprise apps to popular social apps with millions of users, all while dramatically reducing the cost and time required to do so. Perhaps most importantly, Ionic enabled web developers on the sidelines of “mobile” to re-invent themselves as highly productive mobile app developers without risking a complete career and technology change. The “web developer” had evolved yet again to stay the most broadly applicable skill-set in software development.

Fast forward to 2015. The JavaScript world was on the brink of a monumental and rare evolution to a new standard of the language, with exciting new features and powerful capabilities. ES6 signaled a new future of JavaScript that was a better fit for the complex, object oriented apps developers were increasingly building, along with better enabling 3rd parties to build and share code with each other.

js-is-evolving

Around this time, the Angular team approached us about building Ionic on their ambitious new 2.0 version of Angular. As perhaps the most popular Angular-based OSS project outside of Angular itself, it was important to them that we embraced the next generation, and we had no intentions of being left behind! It was decided: We would work closely with the Angular team to build the next generation of Ionic Framework on top of the next generation of Angular.

I’ll be honest, we questioned that decision many times over the last year and a half.

Frankly, Angular 2.x took a lot longer to get to a stable point than any of us expected and we watched other frameworks fill the void. It was rough going for a while, APIs were changing constantly, features weren’t working, and stress levels were rising.

What we eventually realized is that no one had the answers. The Angular team was pioneering a new technology stack and making tough choices that seemed confusing at the time but ultimately made perfect sense. TypeScript was a risky choice that seemed destined to alienate Angular developers from the rest of the JavaScript world. Not using a standard ES6 transpiler seemed like a rejection of community standards. Sticking with HTML instead of an alternative like JSX felt like clinging to the past. Using experimental Decorators was banking on an uncertain feature making it into a standard.

Yet, each one of these decision were ultimately some the best that Angular could have made. The JS ecosystem is now adopting TypeScript in droves (even outside of Angular!). New transpilers have come and gone. HTML has once again proved its resiliency as one of the best markup languages for UI. Decorators dramatically cut down on boilerplate and add powerful new meta programming features. I could go on and on here, but the point is that the Angular team has a vision for how a frontend framework should work, and they weren’t afraid of being misunderstood at first.

It’s worth pointing out that every single developer at Ionic is also a hobbyist and enthusiast of web development, and we are ruthless about evaluating and adopting technology. On the Ionic team you’ll find passionate fans of React, Vue, Angular 1, Ember, Vanilla JS, and beyond. While we’re biased, it’s truly a testament to how far Angular, TypeScript, and Ionic have come that the our own development team constantly raves about the technology stack, despite the rough transition.

So with that said, let’s dig into the all new Ionic Framework:

What’s New in Ionic 2

For those that have been following the development of Ionic 2 closely, Ionic 2.0.0 final is a stable, production ready version of the Ionic 2 you already know. If this is your first exposure to Ionic 2 or you have been waiting patiently (thank you!) for 2.0 final, a number of things are new and different – and we think know you’re going to love it.

New Components, Features, and Documentation

Components

Ionic 2 comes with a bunch of new cross-platform components for building mobile apps, including 100% Material Design support (yes, we have FAB buttons), more capable modals, menus, toasts, and an all new navigation system. We’ve developed powerful new form controls, such as the DateTime picker, that evolve the stock controls available in the browser.

Ionic Native

We’ve integrated a powerful new native plugin system, Ionic Native, with over 70 native features ready to be used like any other Web API, complete with support for Promises and Observables.

Theming

We’ve completely revamped theming, making it easier than ever to customize the look of your app to match your vision, with minimal amounts of code.

Ionic 2 supports three different modes: iOS, Material Design, and Windows. We call this Platform Continuity, wherein each mode matches the look-and-feel of the platform it’s displayed on, meaning your app will behave similarly (and predictably) to the experience your users expect. Each design can be modified to your liking using Sass variables or, in several cases, adding attributes to the component itself.

A default Light theme is included with each new app. Themes can be created by setting the Sass variables Ionic uses to the colors of your choosing. We’ll be rolling out more pre-made themes soon, and be on the lookout for our Dark theme in the near future!

Website & Docs

The Ionic Framework homepage has been re-designed, and Ionic 2 comes with some greatly overhauled documentation.

Enhanced Performance

One of the best features of Ionic is that it helps build apps that feel snappy on a variety of platforms, with one code base, using open web standards and APIs – and we’re constantly pushing the envelope when it comes to app performance.

With Ionic 2, we no longer use JavaScript scrolling, so apps now scroll with 60FPS on both Android and iOS. Our new Virtual Scroll implementation (updated for 2.0 final!) makes it possible to build apps that scroll through very large lists of items (and images!) with a minimal performance hit, along with apps that animate based on scroll events.

An all new rendering pipeline shared with Ionic components reduces layout thrashing and repaints, historically a challenging source of perf issues for web developers. Components only redraw the portions of their view that changed, using both new features in Angular and new Web APIs like will-change, CSS containment, and passive event listeners.

The team is using new tools available in Chrome to hunt down rendering problems, and we’ve published some real world examples of this in action.

Finally, the simple fact that Ionic 2 is built on top of the new Angular makes a huge difference for Ionic apps, as it’s significantly faster than Angular 1. All Ionic 2 apps benefit from this inherent performance improvement out of the box.

Bottom line: Performance is our #1 priority, and we’ve gotten very good at improving web performance over the last few years. Ionic apps (and their developers) will greatly benefit from pre-baked components and features that optimize for performance out of the box. One of the biggest advantages of Ionic is that we abstract away low level web APIs and make it easy to use them without performance pitfalls.

New Tools

Error Handling

For the first RC release, we released a new build toolchain called App Scripts that helps coordinate app building, testing, and running. It was a controversial move at the time but now that users have adapted, we are now able to add new features to the build process much more quickly than ever before.

Since we released App Scripts, we now have new error handling and debugging features built directly in your application:

error-reporting

When a compile error is introduced while developing, using the ionic serve command, details of the error will be shown directly in your browser window. This feature is extremely useful for helping track down issues with code and keeps you focused on development instead of switching back and forth to the terminal. If you haven’t tried this new feature out yet, please do! Seriously, we use it internally and love it.

Ionic Serve Lab

We also released a facelift to Ionic Serve to make it even easier to preview different platforms side-by-side, right in your browser:

ionic-lab

Try it out with ionic serve --lab. We plan to release a lot more improvements and goodies to this serve environment soon!

Production Ready

Now that Ionic 2.0.0 final is out, Ionic 2 is production ready and API stable. Of course, we will continue to relentlessly work on improving our components, features, and performance, but we don’t foresee major breaking API changes.

Despite being Beta/RC for a time, many have been using Ionic 2 for Serious Production Apps. We are thankful for those early adopters who have helped battle test Ionic 2 for the rest of those waiting for 2.0 final.

What’s next?

Ionic 3 of course! (…joking!)

Ionic 2.0 final is hardly the end of Ionic’s development. Coming next we are working on new features to add proper desktop and electron support, something we’ve dipped our toes into in the past but will be making a bigger priority going forward. Similarly, we will be ramping up our Progressive Web App efforts to enable Ionic developers to deploy the same app with the same code across the app stores and the mobile web to take advantage of those diverse channels.

One of our big goals is to improve Ionic’s tooling and native SDK simulation to help you build 99% of your app directly in the browser, a level of development agility unheard of in the mobile development space. This will truly be a super power for Ionic developers compared to other mobile development approaches.

Beyond Ionic ‘the open source framework’, the team will continue to invest in tools to help improve the Ionic developer experience. For example, we recently rolled out Ionic for Organizations which turns Ionic View into your team’s personal app store. We are also working hard to integrate backend features we’ve developed, like live-deploy and test feedback, to Framework users should they desire to use them. We will also continue to invest in tools like Creator that make development faster and more accessible.

I’m also proud to say that Ionic is generating revenue today, primarily with Creator, so we’re making good progress on the path of being a self-sufficient company which is a great step forward for Ionic.

Getting Started

To use Ionic 2, make sure to update to the latest CLI with npm install -g ionic. Start a new project by following our quick Getting Started guide.

To help those V1 apps out there curious about updating to V2, we’ve put together a Migration Guide (PDF) that walks through updating a sample v1 app to v2. The guide starts by explaining why an app might want to update, and breaks down the process of updating into a set of repeatable steps. We also have some Ionic 2 books we recommend (please leave any others in the comments!)

Don’t think of updating from Ionic 1 to Ionic 2 as moving to a totally new framework. Think of it as updating to a new and improved Ionic based on modern JavaScript and the next generation of Angular.

Thank you

Nearly every blog post we publish ends with a thank you to our community, and this one is no different. Every time we feel overwhelmed with the work of building and maintaining Ionic, and staying up to date with the constant evolution of web and mobile technology, you, the community, make us realize that all this hard work is worth it.

When you tell us that Ionic enabled you to become a mobile developer and build your first app, we are proud and humbled. When you tell us that Ionic let your company quickly build a working app and launch to users on all the platforms you care about (Android, iOS, Electron, PWA, desktop), we feel like we’re making true progress on making mobile and web dev easier and faster. When you tell us that Ionic lets you use existing web content and code seamlessly, all while being able to hire web developers around the world, we feel confident that betting on the web was the right choice.

We’ve been working on Ionic in some form now for a little over three years, and Ben and I could never have imagined that Ionic would turn into the force it has. We remind ourselves often that Ionic might very well be the highlight of our professional careers- one of those rare projects that changed the world and became something so much bigger than the original team, a handful of people in the small city of Madison, WI.

If it wasn’t for you all being passionate and building amazing things with Ionic, the project would just be a lot of code on a GitHub repo.

From all of us: Thank you for giving us the opportunity to spend our working hours helping people through the beauty of open software.

Cheers! 🍻


ionic-for-orgs

Today, I am excited to announce the launch of Ionic for Organizations, a new collaborative feature available in your Ionic Dashboard that makes it easy to build and share apps in your organization, as well as manage developers and users on your team.

Many Ionic developers working in organizations large and small need control over who can test and access their apps from Ionic Cloud and Ionic View. We’ve received a lot of feedback that our current collaborator system wasn’t powerful enough for businesses.

One of the most exciting things about Ionic for Organizations is that Ionic View now becomes your company’s personal app store. Developers in your Organization can upload apps and make sure only those in your Organization can view them. Soon we will be extending this feature to Progressive Web Apps for teams that want to skip the app store completely.

Get started with Ionic for Organizations by creating your first Organization and inviting your team. Each developer on the team is $7/mo with a minimum of two, and you can add and remove developers at any time. We’d love your feedback on this new feature!


by-the-numbers-map

Sani Yusuf is a freelance Ionic developer and the co-organizer of Ionic UK, one of Ionic’s largest regional groups.

The first thing a skeptic might ask about Ionic is how the company has achieved its impressive stats (over 27k Stars on Github, top TypeScript project on the web, and over 3 million apps started from the Ionic CLI). How did a small team build a technology that has shaken the mobile development world since its 2013 launch, resulting in apps with global recognition, like Sworkit and Untappd?

I believe the answer lies in Ionic’s vibrant community of people from different backgrounds working together to solve a shared problem. There are over 100 Ionic meetup groups spanning six continents. Ionic’s Slack group has almost 10,000 users, the Ionic Stack Overflow and Ionic Forum confirm how active the Ionic community is.

In December 2015, I set off on a personal tech travel mission, part of which was to reach out both in person and virtually to as many Ionic communities as I could. I was keen to see what people were doing with Ionic, so that I could learn and help collaborate. In this post, I’ll share some of the things I learned during my travels.
Read more…


We’re testing a new, visual way to start Ionic apps.

After updating to Ionic CLI 2.2.1 (released today), run ionic start without any arguments and you’ll greeted by a web-based wizard tool that guides you through creating your app, optionally creating an Ionic ID to use Ionic View and other services, and then launches your app:

Screenshot 2017-01-12 10.54.55

It’s not a replacement for the CLI nor does it change the way the current ionic start command works. Instead, it’s a visual way to get your app going more quickly if you prefer that. As we add more starter templates and features, cramming all the things we want to do into a CLI command starts to become very challenging and a bit dull.

This is a new feature so we’re hoping to have some brave souls test it out before we market it to the broader community. To test, update to the new Ionic CLI and run ionic start (again, no arguments!).

Please leave a comment below on how it works for you.


2016 was a huge year for Ionic. We’ve posted a 2016 recap with some fun numbers and stats on our Medium blog. We hope you take a look, and here’s to a huge 2017!

Thanks to everyone in the Ionic community for making this dream a reality.


This post was co-authored by Sean Senior and Leo Drakopoulos, AWS Solutions Architects.

We’ve got a new solutions brief for building serverless mobile backend solutions on AWS and a step-by-step walkthrough for implementing this pattern, using the Ionic Framework on AWS Answers. Like other solutions on AWS Answers, this solution was built by AWS Solutions Architects and incorporates best practices for deploying scalable backend services for mobile applications by leveraging AWS managed services.
Read more…


ionic-super-starter-banner-2

When we launched Ionic 1, we provided a set of basic templates that helped developers get up and running with common mobile app layouts, such as tabs and side menu.

While Ionic developers enjoyed these templates, in many cases we felt like we weren’t doing enough to share best practices or to help developers get started faster with pre-built pages for common mobile UI designs.

Today we are releasing the first test version of the Ionic Super Starter, a starter project for new Ionic 2.x apps that comes with over 14 ready to use page designs for common mobile designs like master detail, login/signup, settings, tutorials, and more.
Read more…


diesel-header

MobileCaddy is a Mobile Innovation Award-winning product company focused on helping mobile app developers in the Salesforce ecosystem. Their primary product, also named MobileCaddy, allows Salesforce consultancies and partners to rapidly build next-generation offline-first hybrid applications, standardized on Ionic, with a toolset primarily built to support the Ionic framework.

“We’ve been using Ionic since Beta 3,” says Todd Halfpenny, Mobile Technical Architect at MobileCaddy. “We had tried other libraries and frameworks, but nothing compared to the speed of development through the Ionic directives. Things like collection-repeat gave the apps a true performance advantage.”

When global fashion brand Diesel, a Salesforce client, reached the limitations of their Salesforce1 pre-packaged mobile app, Diesel leadership realized they needed an app that was robust enough to deliver on the needs of their workforce, with a more intuitive UX. MobileCaddy built a new Diesel mobile app using Ionic in six weeks, then developed a further three versions based on newly identified needs over the next few months thanks to the solution’s built-in versioning capability.

The resulting app helps Diesel’s merchandising team report on and analyze each store’s and and product’s performance during store visits and identify new ways to positively represent the Diesel brand.
Read more…


Ionic Blog RSS Feed