Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I am building an app that includes these design goals:
Fast and modular - lightweight core that can be expended into a feature rich app in a coherent manner
Mobile first - this app first and foremost targets mobile platforms. It uses some device native features. It must look and feel like a mobile app (with page transitions and swipe events). However, a large subset of its features must also be available to web browsers. My goal it to have one unified code base with a common core and mobile specific extensions.
So far, I have selected the following stack.
AngularJS: I have used a few JavaScript frameworks in my other projects. Angular seems to suit me best in terms of modularity and well thought out design. I want to use Angular native constructs (like directives) and minimize "other kinds" of JavaScript-based widgets from external UI toolkits.
Cordova: I am comfortable with its design philosophy and plug-in system. I am aware of performance considerations which emphasize the importance of choosing the right JavaScript framework.
Some responsive framework: Bootstrap 3 would be my preference at the time of writing. I like its looks. It's design seem sound. There are Angular directives available to replace it's jQuery plugins.
I have a well-defined REST API on the server-side which is bound to Angular resources. I am not planning on doing "presentation stuff" on the server.
Here is my question: On point 3, Bootstrap seems to be missing features to build an "advanced" a mobile app. Bootstrap responsive behavior is great for basic controls, but I need a little more. For example, things like page transitions and swipe events come for free with jQuery Mobile. While I do not expect to find this kind mobile features in Bootstrap, it seems like I should be able to include directives that would add things like page transitions and swipe events without overlapping with the Bootstrap CSS. There is angular-mobile-nav, does anyone use it in conjunction with Bootstrap? Or is Bootstrap just the wrong choice?
I've had the same question myself lately. Bootstrap 3 is my preference, but I wish it had mobile events and animations built-in. In addition to http://www.appgyver.com/steroids already mentioned, I've also come across http://ionicframework.com/ and https://github.com/angular-widgets/angular-jqm.
Kind of late to this question but you should check out Ionic. It uses Angularjs and comes a bunch of great components (angular directives) and is pretty easy to get started with while still being powerful. I've been playing around with it for while and love it. Definitely a good direction for mobile apps.
Oh one last thing, they play well with cordova/phonegap
Did you already have a look at http://www.appgyver.com/steroids it will play well with Angular and Cordova and will save you some of the troubles you mentioned in your question. Of course you can still keep bootstrap for more "basic" needs.
All these answers are good. Both Steriods and Ionic look like great frameworks and acceptable solutions to the problem as described. For my particular problem, I created a very lightweight Angular module which adds iOS7 headers and animations on top of Bootstrap/Bootswatch themes: https://github.com/fredfortier/angular-ios7.
I wanted something very simple that lets me use mostly Bootstrap. For anything more complex, I would definitely consider Steroids or Ionic.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I am new to bootstrap. I have gone through What is Bootstrap? and http://getbootstrap.com/.
As per my current understanding bootstrap is actually a CSS framework which helps us to achieve responsive design that fits all devices.
Which internally means
1) Bootstrap has collection of ready-made CSS files which can apply straightaway to any web app.
2) It provides the modular way where we can structure the CSS files per device and apply it
What i did not get is this
Bootstrap is an HTML, JavaScript framework that you can use as basis
for creating web sites or web applications.
What features bootstrap provides in terms of HTML and JavaScript apart from CSS and what is the role of them in responsive designing ?
In response to your title question 'Bootstrap is css or javascript framework or both?', the latest definition of Bootstrap (taken directly from their website) is "Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.". So YES it is all of those things. However, the way in which you think about this will depend on your current understanding of what a "framework" is and how HTML, CSS and JS are used to develop a complete web solution/site.
In regards to it's features, there will be no-one who can provide as much detail on this as that which can found in the Bootstraps docs. http://getbootstrap.com/.
In regard to responsiveness, this is provided by the bootstrap CSS file that you include in your HTML page. Using #media queries, some very clever people came up with an idea of using a grid system (http://getbootstrap.com/css/#grid) which, "out of the box", provides you a 12 column system that when used correctly allows you to attach pre-defined CSS classes to your HTML elements in such as way that by using percentages, can provide a fully responsive site.
The JavaScript features that can be used are as follows...
Transitions, Modal, Dropdown, Scrollspy, Tab, Alert, Collapse, Carousel etc... all of which, in them selves have nothing to do with the responsivesness.
You can use bootstrap in your html with classes and elements. For example the bootstrap.css file would have styles for tables, anchors, divs, lists etc.
These are then applied to the html elements.
There are also loads of classes that can be applied to the html elements.
Check out http://www.layoutit.com/ this will help you create a templete for your website and then apply a bootstrap.css style sheet to customize it to your liking.
The javascript part of bootstrap works in a similar way to JQuery. It provides functions for different elements of html for example the modal element of bootstrap can use functions defined in a bootstrap.js file
Bootstrap is considered a Front End Framework.
Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications.
Bootstrap is a front end framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm working with a design team to redesign my website, and my lead developer told me to tell them I wanted to use AngularJS instead of JQuery for my HTML pages since it is clean code and has the most modern libs; which they agreed to use.
I guess since AngularJS is newer than JQuery they don't have as much experience with it. In the project scope, we agreed that they would do just the "front-end" work (e.g. templated bootstrap, css/html and animations of the site) for the redesign, but they told me that someone from their team said that AngularJS is also "back-end" programming work too...is this accurate?
If they are creating my HTML pages will they have to do "back-end" programming work if they use AngularJS or will this be only "front-end" work? They say they have to use JQuery because this is all "front-end" work.
Also, they are telling me for specific animation effects such as fading in and out of elements etc. that they want to use jQuery and Bootstrap. They tell me that AngularJS is not the best solution for animations, but it's better for manipulating dynamic and real time information for the website...is this accurate?
It seems to me they are just trying to find ways to not use AngularJS and use JQuery instead which they are more comfortable with.
Animations in AngularJS are possible using one of it's modules called ngAnimate it works by adding CSS classes to your HTML elements, but you need to write the classes yourself and you'll be using CSS3 animations which are much better performance wise than JQuery animations, and only require pure CSS. This is what I used at first and it seemed to be working pretty well for me. However, what I found was that as I started doing more complex animations my CSS rules grew huge especially because you have to prefix most CSS with -webkit -moz -o and the like.
At this point I was ready to try alternatives, but I didn't want to go back to jQuery. What I found was GSAP. It's a stupidly powerful and convenient javascript library for animations, and I could integrate it perfectly into Angular using directives. For example I have this in one of my projects:
.directive('highlight', function() {
return {
scope: {},
restrict: 'A',
link: function(scope, element) {
element.on('mouseenter', function() {
TweenMax.to(element, 0.5, {
color: '#000',
borderColor: '#000',
backgroundColor: '#F2F2F2'
});
});
element.on('mouseleave', function() {
TweenMax.to(element, 0.5, {
color: '#BDBDBD',
borderColor: '#BDBDBD',
backgroundColor: '#FFF'
});
});
}
};
})
If I have a link in my HTML shaped like a button it was as simple as writing
<button highlight></button>
And I'd have a button with an animated border, text color, and background color. Moreover, it's reuseable. I don't have to write the highlight rules for every single button in my DOM. I just have to add the attribute highlight.
jQuery works, but it's animations suck. Angular is better, but it's verbose and I personally didn't enjoy implementing it. I lean towards GSAP because of how powerful and flexible it can be while also giving you the best performance in your animation.
As LoganRx said AngularJS is a client side javascript library. It does have a superb animation module that can be added for CSS animations. However if CSS animations don't cut it you are probably going to want to look at Javascript animations as well. This is where Jquery animations would come into play. There are many Javascript animation libraries out there however. Furthermore AngularJS and Jquery have two different purposes. From the example in your comment fade in and fade out animations are basic css animations that are included with the AngularJS animation module. So you could use it for that purpose.
AngularJS obviously has no dependency on JQuery and vice versa. AngularJS is great for model and view binding making ajax requests, routing, CSS animations and a whole lot more! In fact you can build an entire application with just AngularJS. Jquery however is a very general purpose javascript library that gives you utilities that are not available in AngularJS. In many cases you are going to use both libraries.
Yearofmoo who has contributed greatly to AngularJS has a great blog which includes a lot of animation examples for AngularJS. You can find his blog here: http://www.yearofmoo.com/
To address the issue of whether server side work will need to be done is actually quite tricky. It depends on how the application is rendering dynamic content right now. If the whole HTML document is just being generated by the server based on some dynamic information and there are no real restful data end points then yes you are probably going to have to do some server side work to create end points where you can retrieve the dynamic data to be consumed with AngularJS. However if the current application relies heavily on Ajax calls that return Json or XML objects (or if it was really well designed, and it uses serialization frameworks) then you probably won't have to do much server side changes if any at all.
First off AngularJS is a front-end JS framework and technically does not require any back-end programming. It can interact with a back-end very easily and efficiently but AngularJS by itself is not back-end programming.
In terms of the animations there are just as many ways to animate things in Angular as in jQuery. CSS Transitions, Transforms, and Animations will all work with Angular without jQuery it is just a different way of thinking. There is also an Angular Module called NgAnimate which allows for more directed animations for different interactions on the page.
So in conclusion, as an Angular Developer, I would be aware that everything that you are looking for is possible to accomplish with Angular and is not difficult unless they are unfamiliar with Angular. But the aspects of the application that they are claiming would be made easier with jQuery are extremely similar in syntax and execution in Angular. Also, Angular has jqLite built into it which allows for some basic jQuery functionality already.
Angular is not for animations. Angular is framework for developing applications for the web. So things like advanced user interfaces for example.
Doing animations in angular is just bad idea. You can, but they will be bad, although doing them in jQuery can be also bad if you don't use it properly(and by the way jQuery is also not for animations, but have few useful functions). jQuery is still update and it's industry standard. It was published few years ago for the first time, but new versions are coming regularly.
Don't get me wrong here Angular animations might be quite well done, however whole angular it's tones of tones of code, which only some bits have anything to do with animations
Angular is not back end framework. You can connect it easily with backend using for example mean.io but angular itself mostly still stays on front.
By the way, in my opinion angular is slow and don't embrace good practices. Also next version of angular will be not compatible with previous one so no update to most recent version in the future.
I'm working on an HTML5-based app with an iPad view and wanted to have a list in a sidebar that has navigation nested so that I user could drill down a couple of levels before tapping the desired item in the main view to the right. I don't have a ton of web experience and I'm hoping someone could point me in the direction of a js-based library that would offer such functionality. The closet thing that I could imagine would be something similar to the UINavigationController in iOS that would allow me to easily push and pop lists of items.
I've explored JQuery Mobile and the closest thing that I could find was the 'nested listview' functionality, which as of version 1.3 is deprecated.
jQuery Mobile has this functionality built in. I would suggest reading through all the documentation. It will give you a better understanding of jQuery mobile and what you can and cant do.
Or if you just want information about the Navigation Model you can read about it here.
Finally you can find a demo of it in action here.
If you are not going to built it yourself then jQuery Mobile is probably the way to go.
Description from their website:
A unified, HTML5-based user interface system for all popular mobile
device platforms, built on the rock-solid jQuery and jQuery UI
foundation. Its lightweight code is built with progressive
enhancement, and has a flexible, easily themeable design.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am creating a website from scratch which would work for both desktop and iPad. There are going to be some UI components like sliding panels like you can see on
http://www.moneycontrol.com/tablet/
Plus some other things like Accordion, Drag drop things, etc
I need to have the same html file to be called for all devices (can only have separation at css or js)
Now we can implement these in multiple ways. In some cases, it is possible to have the same component work in both desktop and iPad without modification (e.g. Through jquery ui)
But guess there are some downsides like performance issue. Not sure if this is the only thing. Please suggest if you know of any other thing, may be from development side as well.
Another approach is to have different ui component to work on desktop vs iPad. E.g. For the site http://www.moneycontrol.com/tablet/, it uses DMZone sliding panels which would only work on iPad and not on common desktop browsers..so in this case, we would use another component which would work for desktop. Is this a good approach?
Thus My question is like which approach should i go for, both from a user perspective, future development efforts for some other mobile device ?
I need some strong points which would really justify the right approach.
Please suggest as much as you can. I am quite open to all ideas..
What you are looking for is a mobile app framework that supports desktop clients. There are tons of those available both free and commercial.
One of those which is quite popular is http://www.appcelerator.com/
Although i haven't used it and i can't tell you if you will hit a dead end on the road (with the sliders for instance), this is the best approach that you can do.
And, you are more than covered for future mobile devices.
You can do your own research of other frameworks, but appcelerator seems fine.
EDIT:
Seems like there is controversy whether its best to create native app vs browser based app on mobile devices. There are some interesting posts:
http://www.readwriteweb.com/archives/mobile_app_or_browser-based_site.php
http://blog.caplin.com/2011/02/11/sdps-native-or-browser-based-mobile-apps/
The only sane way to export your app to multiple devices is to use a framework. The other way is to make hundreds of conditionals depending on the device that is visiting your site...
If you want pure HTML interaction in the mobile device, then you can use jQuery Mobile. But you will have to make some sort of hacking to render the page correctly on desktops.
Sencha touch is the best web based touch UI toolkit out there, in my opinion, it's also free. http://dev.sencha.com/deploy/touch/examples/kitchensink/
Click on the 'User Interface' link to see examples.
Apps written in Sencha touch work on iOS, Android and Blackberry. One code base for all your mobile OSs. You can also run them directly in safari/chrome.
Here's their API http://dev.sencha.com/deploy/touch/docs/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
Are there any iPad compatible wysiwyg HTML editors?
Edit: What I'm looking for is something that would work on a web app, not a native iPad app.
I think that the GDocs editor might work, but keep in mind that there's almost no editor like that, they are managing everything by themselves.
The rest of editors try to use contentEditable, and Apple itself warns against using it with the iPad: http://developer.apple.com/library/ios/technotes/tn2010/tn2262/#//apple_ref/doc/uid/DTS40009577-CH1-DontLinkElementID_7
I would advise you to use NicEditor which has an option of using content editable divs rather than iframe(has some issues in ipad)
I don't know but think that what you are after is something to edit the code of a web app. If it is then since the web app is essentially a web page you could use any text editor, I personally like Gusto for the iPad- http://itunes.apple.com/us/app/gusto/id364906873?mt=8.
Either that or you are looking for a HTML editor which is a web app itself. In that case, sorry I don't know of any.
I am sure there may be a few that exist. I have not had any experience with either but take a look at the below links:
iPad HTML Editor - http://itunes.apple.com/us/app/kytekhtmleditor/id349354394?mt=8
SquareSpace for iPad - http://mashable.com/2010/12/21/squarespace-ipad/
Check out the following Web (html) Wysiwyg Editors.:
Dreamweaver
Flux (Mac only)
Creative Suite
Expression Web/Studio
There are a quite few available WYSIWYG editors and some are even free. However, 'free' is not always best as the code compilation may not be optimal and important features are lacking.
Hope that helps!
I was also looking for this too and couldn't find it so I coded it myself.
iPad web based Code Editor (with extra symbols keyboard)
It is a web-based code editor that allows you to type in all the symbols and characters used when programming (brackets, equal sign, tab, quotes...). It is currently in a very early stage so you will need to copy/paste the code, edit, copy/paste again somewhere else (Dropbox, FTP client).
You may also want to check out CodeAnywhere, they have a native app AND also a web-app.
I've experienced a similar issue in a web app I've developed that does not allow wysiwyg editing when run on an IPad/IPhone. The wysiwyg component I use is Telerik's RadEditor (a terrific product, btw), and Telerik has posted a KB page regarding this issue at http://www.telerik.com/support/kb/aspnet-ajax/editor/support-for-iphone-ipad-browser.aspx. It seems, at this point, that Apple has chosen to lock down Safari on the IPad/IPhone in such a way that these rich text editors do not work. I haven't yet seen an alternative solution to this (other than allowing IPad/IPhone users to enter their content in a plain ol' textbox) but am keeping my ear to the ground.