search

chukcha-wtf / ember-cli-f7

Ember CLI plugin wrapping Framework7
MIT License
3 stars 1 forks source link

Example or docs ? #1

Closed nicooprat closed 9 years ago

nicooprat commented 9 years ago

Hi,

I'm pretty interested in your project as I'm also trying to merge Ember and F7. Could you provide some more documentation or a basic example of an application to run ?

I see you're using liquid-fire, so I guess you don't use F7 routing API ? Did you already tried to use it ?

Thanks

chukcha-wtf commented 9 years ago

Example app is laying under tests directory https://github.com/chukcha-wtf/ember-cli-f7/tree/master/tests/dummy . You can download ember-cli-f7 repository, run npm install && bower install and then simply start server via ember s to see it in action.

F7 routing API is used mostly for rendering HTML (which is done via ember router) and providing page animations (which can be done via liquid-fire). However I was disappointed with Velocity.js (used by liquid-fire) performance so in my app I've combined liquid-fire with F7 default animations which provided pretty good results. If you'll be interested I can provide some draft gist which explains how it was done.

nicooprat commented 9 years ago

Oh ok, I'm looking in your dummy tests right now ;) The result is pretty good ! But I'm new to Ember so I'm a bit lost for now.

In which case did you find Velocity bad perfs ? Some Android devices ?

Liquid-fire allows to have a good management for the back button that is a common problem when working with transitions... But it seems that you loose the swipe back gesture (F7 feature) ?

Some gists could help for sure, thanks !

chukcha-wtf commented 9 years ago

It's a common practice to include 'dummy' app when developing add ons)

Yeah, on my N5 Velocity added additional lag for about 100 - 200ms before page transition and compared to iPhone5 it was an noticeable delay.

Basically I wasn't interested in swipe back, personally I don't like it as it works badly when used with swipeout actions (like in mail app on iOS) but am pretty sure that similar functionality can be achieved.

Here's a gist which will guide you through creating page animation in your app. https://gist.github.com/chukcha-wtf/3c042755cc000f9ce61d

hint: to speedup page rendering on older Android devices I'll recommend to use pure HTML instead of components from ember-cli-f7. While they provide some simplicity while creating layouts it also adds some additional listeners which is not good on Android, unfortunately.

nicooprat commented 9 years ago

Ok I didn't know for that dummy thing ;)

As an iPhone user, I think swipe back is a must have to create quality hybrid app, as it doesn't feel native without this feature. But I guess we have to make a choice here !

I'll take a look at your gist, thanks. Thanks also for the hint, indeed i saw a lot of .ember-view in the rendered HTML, which surprised me.

Btw, do you know how Liquid-Fire internally "hooks" Ember routing to append new pages, instead to have them "immediately replaced" ? I'd like to try to use F7 router API ; I kinda succeeded in using it with Meteor, but can't find any way with Ember, for now...

chukcha-wtf commented 9 years ago

Well, with some sort of further hacking 'liquid-fire' and adding 'caching' mechanism I'm pretty sure that we'll be able to achieve 'swipeback' however it's not my primary goal at the moment.

There are fairly complex approach for rendering few routes at the same time, I suggest you to start from here https://github.com/ef4/liquid-fire/blob/master/addon%2Frouter-dsl-ext.js .

.ember-view class will be added for anything rendered by ember (when you're using components for example).

btw, if F7 worked well with Meteor why you've switched to Ember?

nicooprat commented 9 years ago

Ok thanks for the clues. Actually, we're trying several solutions to find which one fits best our needs. Meteor is pretty cool and easy to learn, but can be too restrictive. We're not set on any framework for now.

chukcha-wtf commented 9 years ago

Haha, let me now when you'll find the best solution, as we're at the same boat at the moment) We've tried pure ionic but it doesn't work well, especially with 'swipeout' actions. And I'm still interested in trying ReactNative, but there appears some problems with cross-platform app porting (additional actions required which isn't good for us).

chukcha-wtf commented 9 years ago

Closing an issue for now

nicooprat commented 9 years ago

Haha, wish me luck !

Speaking of UI framework, Framework7 looks the best for me because it's really framework-agnostic (among other qualities). Ionic, Onsen UI and Supersonic are all more or less based on Angular, which is not an option for us today because the 2nd version is coming, but not stable yet. What's more, we need something thought for native (via cordova) and responsive, which is not the case for Ionic for example (doesn't even support Firefox).

Speaking of client-side MVC... well, we'll see !

Anyway, thanks for your help ;)

Nico Prat

Le 21 septembre 2015 à 16:18:32, Pavlo Babenko (notifications@github.com) a écrit:

Haha, let me now when you'll find the best solution, as we're at the same boat at the moment) We've tried pure ionic but it doesn't work well, especially with 'swipeout' actions. And I'm still interested in trying ReactNative, but there appears some problems with cross-platform app porting (additional actions required which isn't good for us).

— Reply to this email directly or view it on GitHub.