What is the difference between Ionic Framework vs Famo.us Framework. It is possible to use both framework in one project . Which One support smooth render graphic on mobile devices ?
Both framework support AngularJs?
Both frameworks work with AngularJS, but they come from a different direction and have different goals.
Ionic
is built on top of AngularJS and extends it, providing you with buttons, grids and other ready made UI elements to help you publishing your mobile app real quick. AngularJS focuses on data binding and the MVC structure of your app and doesn't really care about whether it's running in a desktop browser or on a mobile device. Ionic concentrates on the presentation of your app data and extends AngularJS to make it fit for use on mobile devices and supply you with design patterns that mobile users have come to expect. Since Ionic sits on top of AngularJS, you can't really have Ionic without Angular.
Check out Ionic's components to get a better understanding.
Famo.us
on the other hand strives for the fastest render performance. It just so happens that you can put regular HTML into a Famo.us Surface — which is the container that holds the content to be displayed. That content can be HTML, but doesn't have to.
Famo.us itself doesn't use the standard HTML reflow to position its surfaces in the viewport but its very own implementation of a render tree, so you're free to manipulate surface position and rotation, even in 3D space, with buttery smooth performance. HTML that is put inside a surface on the other hand uses reflows to position its elements just like you're used to. Read more about the render tree.
Famo.us can output to HTML, but can also render using WebGL or even Mixed Mode, combining DOM with WebGL. This allows for fancy graphic effects that wouldn't be quite possible with plain CSS. There's also tight integration with Easing and Physics to allow for playful and realistic animation.
Now that there's Famo.us/Angular, I don't see why you couldn't use Ionic and Famo.us in the same app, although I haven't tried it yet.
Summary
Ionic sticks with the regular DOM for rendering and focuses on mobile design / UX patterns. Famo.us disregards the DOM and lets you (read: requires you to) build / populate the render tree, provides physics and allows for more complex and fluid animations. This also means that using Famo.us comes with a learning curve. Good thing is: you don't have to go 'all in', since you can build certain views of your app with Famo.us and then use regular HTML/CSS for everything else.
ionic lists work well when famous is loaded in the same index.html SPA.
Some things like touch to pan in angular-google-maps stop working when ionic and famo.us share the same page.
Transitions from a ionic tabbed state to a detail view using ion-nav-bar animate badly too.
So i recommend you to keep things separated just by switching your app from famous.html to ionic.html as needed. each implementation having its own stack of dependencies and its own separated styles as they come in the sample apps.
you can transition by using document.location.href
i think you can find a way to transition to specific states from one world to the other by setting the proper state in the url.
Related
I have a React Native App (using Expo) and I’m trying to implement a map/search layout similar to what is in Yelp or many other location-based hybrid map/search views (eg I checked all of the food related apps on my phone :slight_smile: McDonalds, Starbucks, DoorDash):
Specifically, I’m curious how to create that sort of draggable panel from the bottom, where you can drag it so that it overlaps the map.
Yelp/DoorDash technically have 3 states for this bottom panel: a completely collapsed state, an intermediate (default) state, and a completely expanded state, and you can even flick from completely collapsed to completely expanded.
Is there a standardized way to accomplish this with React Native? (I'm a little out-of-touch with the RN ecosystem.)
Ahh, here's a third party library where this behavior is implemented, and even the example in the documentation is off a map searchview. https://github.com/octopitus/rn-sliding-up-panel
I am using the Angular Google maps directive to show maps on my webpage. Currently my markers are created using SVG but this is slow as I have to pass my information into a function that creates an SVG in memory to pass to the Google Icon. So I want to replace it with a custom HTML marker which will hopefully be less code and can leverage CSS classes for lots of the heavy lifting.
Unfortunately this isn't available as standard within the Angular Google Maps markers (unless I havent seen it?!)
I found a tutorial on how to do this with Overlays but I need clustering to work with my icons.
How can I do this? Without rewriting everything from scratch? Ideally I'd like to leverage as much of the existing angular-google-maps code as possible
The way I ended up doing this was to put in rich HTML into the labelContent property, setting a class on it via labelClass and then setting the icon to be transparent (https://maps.gstatic.com/mapfiles/transparent.png)
This way the actual icon is invisible but you can create rich HTML / CSS markers through the label. And this doesnt break functionality with the clusterer
I want to create an application on Facebook and I will host it on our server to be used from Facebook Canvas.
I was thinking of creating the web app with Angular.JS but one of my friends told me that my web app must be drawn inside a <canvas> html tag or I will not have the full functionality of Facebook integration.
So this is my question, do I have to draw my elements inside a <canvas>? or I can use other html tags with some basic animation?
No, you do NOT need to use HTML5 Canvas. There are "Canvas Apps", but there is no relation to HTML5 Canvas. Please check out the docs for more information: https://developers.facebook.com/docs
There are only a few things that are not possible without a Canvas App. For example, you can only use Notifications with a Canvas App, or you can only use invitable_friends in a gane with Canvas implementation. Don´t worry about those before reading the docs.
I use Ionic for my iOS hybrid application,
I want to create a custom header and use a background image for all pages.
I want to know is there any way to create a master page in Ionic + AngularJS for using in another pages?
The answer varies depending on how you've already setup your app. Probably the simplest approach is to use a background image with CSS on the body of the page. That is just one line of CSS, but you'll have to consider how that image works or displays on various device sizes or if your app is in portrait or landscape mode.
I'm building this website using bootstrap.
The problem is that i have nested drop downs. The dropdowns look nice and not cluttered in desktop version.
However this is how it looks in mobile:
They look cluttered, and you can't fold/unfold the deepest level of dropdowns. It just doesn't allow this.
I'm thinking there are better ways to represent information in mobile view. My approach was when person touches 'buildings/land' tab, i replace bottom navbar with contents of Buildings/Land, thus reducing one level of dropdowns.
Question:
I'm really not experienced in developing UI. Is my approach sufficient?
How should i solve this problem?
I use a sweet JS plugin that plays nicely with Bootstrap, called Snap.js. If you've ever used the Facebook iOS app, you'll be familiar with this layout. There are some great demos here.