Ionic2, Webpack and ECMAScript6 boilerplate

Today we had the chance to discover a Ionic2 presentation by @adamdbradley at AngularConnect London!

This presentation announces the alpha release of Ionic2 and shares the documentation on how to start building your own app with Ionic2.

As I got pretty excited I also created a boilerplate based on the cutePuppyPics starter kit by ionic team. My version is enhanced in many ways:

  1. removes gulp dependency (only webpack is needed and because you’re worth it 😉
  2. removes ionic-cli dependency (only cordova and webpack-dev-server are needed)
  3. removes dist files (only the sources are committed)

Running this boilerplate is as easy as running these two commands:

# Install dependencies
npm install

# Run the dev server
npm run devserver

Now open your browser on http://localhost:8080/ and enjoy Ionic2 🙂

Demo (3mb, can be pretty slow to load..)

Source available on Github : https://github.com/shprink/ionic2-webpack-ES6-boilerplate

How to install NodeJS 4.x on Ubuntu

Via NVM (Node Version Manager)

# get the latest nvm release https://github.com/creationix/nvm/releases
curl https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

# OR
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

# Restart your terminal or run
source ~/.profile

# Install the NodeJS version needed
nvm install 4.1

# update npm
npm install npm -g

Via PPA

curl -sL https://deb.nodesource.com/setup_4.x | sudo bash -
sudo apt-get install -y nodejs

# update npm
npm install npm -g

WordPress Hybrid Client: v1.7.x now with native transitions

I am happy to announce the release of WPHC 1.7.x, this release adds native transitions by default to WPHC.

Under the hood WPHC uses https://github.com/shprink/ionic-native-transitions another plugin that I created to simplify native transitions usage on Ionic applications.

You can change the default options or disable native transitions using the configuration:

"cordova": {
    "nativeTransitions": {
        "enabled": true,
        "options": {
            "duration": 400,
            "slowdownfactor": 4,
            "iosdelay": 60,
            "androiddelay": 280,
            "winphonedelay": 200,
            "fixedPixelsTop": 0,
            "fixedPixelsBottom": 0
        }
    }
}

WordPress Hybrid Client (WPHC) is an Open Source project available on GitHub.

You can refer to the online documentation to properly build your applications. A Computer science background is required but the explanations should be clear enough.

1.7.0 ChangeLog

milestone

Native transitions for Ionic Framework made easier

I have heard about the Telerik’s native transition plugin for Cordova recently. To me this is not only a game changer in the hybrid industry, but in the entire mobile application industry.

Indeed with this improvement it will be really hard to tell what’s an hybrid application and what’s not. With the help of Ionic Framework, AngularJS and Cordova, hybrid applications are now sexiest than before, cheaper to produce and quicker to release. I started developing hybrid applications two years ago and the improvement made by Ionic, AngularJS, Cordova, Crosswalk are tremendous!

To help the Ionic community to use native transitions I created ionic-native-transitions a plugin available on github and npm where transitions are automatically added to your ionic application.

Just turn the plugin ON and enjoy native transitions 😉

native-transitions