meteor with mobile front-end UI framework [closed] - jquery-mobile

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
Has anyone integrated meteor with mobile front-end frameworks?
In making mobile html5 apps look "more native" there are a number of CSS/front-end frameworks. eg:
Meteoric http://meteoric.github.io/
http://onsenui.io/
http://topcoat.io/
http://jquerymobile.com/ (shudder)
http://goratchet.com/one.html
http://ionicframework.com/
App.js: http://code.kik.com/app/2/index.html
http://lungo.tapquo.com/
http://famo.us/
http://goratchet.com/
http://www.idangero.us/framework7/
Foundation for apps
and more. In comparison to plain Bootstrap, the main benefits are:
preloading content
smooth full-screen page navigation
mobile widgets with "native look" for ios/android
But these frameworks often have use their own MVC model, for example pre-loading content into offscreen DIVs and doing full-screen transitions. they often use an internal router or Pushstate which would conflict with Meteor/IronRouter. And ionic for example depends on angular...
Has anyone had success with this type of integration? Any leads appreciated.

Meteoric
http://meteoric.github.io/
is a port of ionic, to remove the Angular stuff, and make some UI parts reactive. EDIT: not being updated now that angular is an option to jam into meteor itself.
related article:
https://medium.com/space-camp/cross-platform-uis-for-mobile-meteor-apps-6f12b583b205
this does seem like a great solution for mobile, but won't help if you want one UI to be responsive across to desktop devices too. they have deliberately kept the grid simple and mobile focused.

As I understand, you are interested in any cases of mobile front-end framework integration with meteor.
Let me show you great example famo.us + meteor from Percolate Studio - guys who are doing a lot of stuff with meteor and for meteor too. Here announce in meteor blog, also video from devshop
Some useful links in blog and devshop will be a good example of successful mobile+meteor integration in production app.

Ratchet is available as an atmosphere package. It does not include all the javascript parts of the framework but very handy nonetheless.

meteor-ionic
It uses the ionic

Bootcards is very good choice it's not meteor package yet .
Ratchet is lightweight but also good choice .

another new contender is Materialize which is a CSS/JS version of the material design elements, ie no angular required:
https://github.com/Dogfalo/materialize
here's a blog on some of the basics
http://blog.differential.com/the-easy-way-to-add-material-design-to-your-meteor-app/
pros
Materialize seems to have a decent set of widgets, and nice animations.
cons
pure android look, don't expect any appstore feature love
no full-page transitions out of the box, like meteoric

From the general goal sense, the front end part of Meteor somewhat conflicts with Angularjs. However, nothing is impossible if you really want to make them together. To accommodate them together, you need to do some special tricks. This following post shared the experience to make them working together.
mrt:ionic is the package by integrating meteor and ionic together. But it does not support the latest meteor version. You'd better wait for some time for the update.

Foundation for Apps from Zurb is another option, but it's built on Angular so would have to be ported/hacked about in the same way the Ionic project was.
http://foundation.zurb.com/apps/

Related

Website development - Which tools and languages? [closed]

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 6 years ago.
Improve this question
for a project I will need to develop a website. The problem is: This is the first time for me.
I am currently planning and drawing the outlines and also trying to find out which technique will suit the project best and how to approach this task.
The website should retrieve data from an API by using RESTful HTTP-Commands and present the results to the registered user.
My programming experience so far is mainly C++ and some C#/.NET which I used for the creating the API.
So, which language and script do you think would suit best? I have looked into ASP.NET MVC a bit because of my previous experience with .NET. Is that a proper choice?
Apart from
that, I would prefer a graphical designer for the HTML-coding. What tools would you use? I looked into Google Web Designer, but I was not quite persuaded. What would you recommend?
Thanks in advance!
Eteokles
I agree with Sami, if you have basic knowledge in CSharp/.Net it is not a bad idea to use ASP.NET MVC/API to setup your project. But you should bear platform dependence in mind if you are not using .NET Core, which is actually in Version 1.0.0 RC 2. So if you use ASP.NET 4 you will have to use a Microsoft Server to deploy your application. If that is no problem for you, then I would recommend to have a look at Microsoft Virtual Academy. Developing ASP.NET applications with Visual Studio is a pleasure, you have great debugging tools and you can create Unit Tests to test your application.
Unfortunately there is nothing like a graphical designer for your HTML frontend in Visual Studio. But if you are using Bootstrap you can reach your design goals really fast. Also Bootstrap is "mobile first" which means, that even if a user accesses your Website over a mobile device (Tablet, Smartphone) the site will look great. The basic ASP.NET 4 MVC template comes with a Bootstrap layout, you could build upon.
If you want to enable users of your application to create user accounts you can choose the ASP.NET MVC template with "individual user account" ASP.NET Identity
In conclusion I want to provide you another link where ASP.NET is compared to another very popular and easy to learn language for developing websites PHP vs. ASP.NET. I would recommend ASP.NET after using PHP for years, because thinks like asynchronous programming and using Entity-Framework to handle your database needs.
I would also recommend you to do further reading on the pros and cons of different tools and languages and after you have a general overview over the available solutions you should compare which language and which tools match your application needs most. Happy coding.
Based on your experience/knowledge, ASP.Net, MVC and API seems a good to go option. You might need to understand Javascript/jQuery and JSON to communicate with API. It's pretty simple like:
$.getJSON("http://localhost/api/products", function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
})
For UI, Bootstrap is always a good choice and easily get your layout at
Layoutit
For Web API, a good tutorial found at Web API in ASP.Net MVC
Hope this helps!

For asp.net mvc which js best either AngularJs or BackboneJs or KnockOutJs? [closed]

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 working in Asp.net MVC for last 1 year but I have never used AngularJs , BackboneJs or KnockoutJs . Now I want to use it in my project but I am little bit confuse that for MVC which is one is Best . Somewhere I read that AngularJs has best perfomance but mostly used with MVVM framework so kindly provide me proper guidance that with Asp.net MVC which js is best either AngularJs or BackboneJs or KnockoutJs ?
Thanks in Advance.
If you are building single page application you need a SPA framework. It should include two-way data-binding, client-side routing, page composition, navigation, screen state management, module system, bundling. You can choose between Angular and Durandal. They both provide very similar functionality, but in my opinion, Durandal is the most complete SPA framework, which is very easy to use. Both Durandal and Angular can be used with Breezejs to build data centric applications.
check Durandal, Durandal Auth and HotTowel Angular
If you are building ASP.NET MVC application, then all you need on the client side is two-way data binding to reduce DOM manipulations. In my opionion, it's an overkill to use angular just for data-binding. Backbone or Knockout are good choices, but Angular can be used as well.
It depends on the nature of your application. And since you did not
describe it in great detail, it is an impossible question to answer. I
find Backbone to be the easiest, but I work in Angular all day.
Performance is more up to the coder than the framework, in my opinion.
Are you doing heavy DOM manipulation? I would use jquery and backbone
Very data driven app? Angular with it's nice data binding
Game programming? none, direct to canvas, maybe a game engine - Source
Also, take a look at https://stackoverflow.com/questions/5112899/knockout-js-vs-backbone-js
You can check the following source. It's really complete:
http://www.infoq.com/research/top-javascript-mvc-frameworks
Personally, I'd go for Angular just because of its performance, but there are plenty of reasons...
I'm using Knockout with ASP.NET MVC/Web API at work, but I have played with Angular at home and honestly prefer that. Bear in mind though that Knockout solves a much smaller problem than does Angular, the latter being a complete SPA framework (with services, HTML directives etc). To compare apples to apples, you should consider Knockout in tandem with Durandal, as this is a full-blown SPA framework like Angular.
From practical experience I suspect that memory leaks are easier to avoid with Angular than Knockout, since Knockout produces references implicitly as you subscribe to observables (typically via ko.computed) and we had a very hard time trying to track down such memory leaks due to undiciplined taking of Knockout subscriptions without cleaning up. With Angular I couldn't see that you have the same problem, as you don't subscribe directly to mutating variables ("observables"). Instead, the framework is in full control of applying model changes, which might be harder to grasp initially, but ultimately leads to better maintainability.
I have not tried knockout or backbone. With Angular I have worked with ASP.NET MVC. I personally did not like using MVC views. As Angular requires POJO (Plain Old JavaScript Objects) , So, I changed to Web Api and Angular. To be honest I am very satisfied with Angular because of following reasons:
DOM maniuplations are done where they belong.
Two way binding
Designed with unit testing
Services are where they belong
Designed with HTML5 in mind
Ability to create HTML markup to suit business needs (directives) and many more.

twitter-bootstrap vs jquery-mobile [closed]

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'm wondering if someone can give some advice as to which is 'better'. Twitter-bootstrap or JQuery mobile?
Thanks,
-peter
I don't know if "better" is something you can answer since they serve different purposes. Bootstrap is great all-purpose CSS library whereas jQueryMobile is closer to a framework. Meaning jQueryMobile doesn't just make your pages look nice- it gives a lot of mobile oriented features such as- swipe-events, page transitions, allows for single page applications (since it will only show a single div with data-role='page' at a time), AJAX preload and history API, and lots of touch friendly components/widgets. Whereas bootstrap is foremost a CSS library mostly for desktop but works on mobile as well especially since 2.0 comes with media queries built in. Bootstrap will not help you with touch friendly lists, checkboxes, select menu's, etc.
One more thing to point out, jQueryMobile takes your markup and dresses it with all sorts of pretty stuff using JavaScript. Bootstrap has some javascript, but only for optional components, the rest is CSS.
So to answer IMHO- if you're a making a web application that you explicitly plan on using primarily on mobile devices go with jQueryMobile; Anything else go with Bootstrap- it's really quite awesome.
jQuery mobile != twitter bootstrap. Twitter bootstrap is used to create responsive layouts [a single CSS can work on big as well as small screen size]. jQuery mobile is intended for mobile development. So if you develop a site using jQuery mobile won't give a good layout consistency in all desktop browsers.
While I agree that Twitter Bootstrap != jQuery Mobile, you can develop mobile sites with Bootstrap. After spending the last couple months developing a mobile site using jQuery Mobile, my conclusion is this:
The concept behind jQuery Mobile is perfect. The "page" concept integrates very well with server side technologies (ASP.Net MVC in my case). It allows you to develop pages as individual files, rendered mostly on the server, as you're already used to doing and probably desire to do.
However, in its current state, it can get very slow and very buggy if you try to do too much with it. I've run into problem after problem with it on my project.
So I'd say, if your site isn't too complicated (e.g. no swiping, no wizards), then go with jQuery Mobile. Otherwise, think about waiting for the project to mature. It's almost there.
I think the main differences are apparent by how the two projects identify themselves:
Bootstrap:
"Sleek, intuitive, and powerful front-end framework for faster and easier web development."
jQuery Mobile:
"Touch-Optimized Web Framework for Smartphones & Tablets."
Both frameworks are aiming at meeting different needs and accomplishing different things. I've used both of them in separate projects and each of them have strengths and weaknesses, but it would be a disservice to both to directly compare them. It's our job as programmers/designers/engineers to decide the goal for your project and pick the best tool for the job.
It depends on what you are going to do with it. I prefer Bootstrap in most cases, because i like the base css plus you can compile with responsive.less so you got a mobile version too. Iam much faster when prototyping with bootstrap because it is very loose coupled and just plain markup (except for the plugins, those are great too).

ASP.NET MVC Scheduler open-source? [closed]

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
.NET MVC Scheduler/appointment open-source?
Thanks!
Our team had an MVC 5 project recently with this need. The project required the ability to display a calendar of events from a database as well as add and delete existing calendar items. We looked at DayPilot Lite's & Dhtmlx's JavaScript version 4.1 open source versions.
What we found
Both have JavaScript versions and .Net WebForms and/or MVC integrated versions however for our project we desired the JavaScript versions over the MVC integrated versions as we felt it was cleaner and fit more with our development model (We don't tend to use 3rd party integrated controls). JavaScript was the only free version offered by Dhtmlx while DayPilot offers the lite open source version for WebForms and MVC.
Both have nice tutorials available on their site and on various sites like code project.
What we chose
We used dhtmlx's JavaScript Event Calendar / Ajax Scheduler in an ASP.Net MVC 5 app as it had a few more features in it's open source version that we desired. Namely the color coding option was ready to go out of the box and we found the API very flexible, exposed events and customization options to be very powerful. We have been very happy with it and found it was easy to use their documentation site and samples site to figure out all that we needed to do. We did not use their data connector as we found straight AJAX calls worked easy enough for our scenario.
Getting started with dhtmlx
Here's a couple of articles on code project that we used to get us going with dhtmlx.
http://www.codeproject.com/Articles/148500/Event-Calendar-for-an-ASP-NET-MVC-Application
http://www.codeproject.com/Articles/249921/How-to-Build-a-Room-Booking-Calendar-with-dhtmlxSc
In case the links stop working the author is Stas Wolski for both of them.
Both examples are old but still effective. Finally, we used their online demos (can be downloaded) and online documentation site as well.
Knowledge share
One of our biggest tricks to the calendar was the date format matching (or mismatch in our initial case).
We used the format of scheduler.config.xml_date = "%m/%d/%Y %H:%i".
For dates coming from our MVC View Model (VM) we made sure to convert them to string formats of short date (#Model.StartDate.ToString("d")) if it was a date in the VM.
If the VM passed a date as a string then we made sure the controller used the following format example (item.StartDate.ToString("MM/dd/yyyy HH:mm:ss")).
Some potential helpful API's we used that might just be of use.
Reacting to calendar clicks - take a look at scheduler.attachEvent
Changing the Hours Scale look - take a look at scheduler.templates.hour_scale
Need to customize the view of different event types - take a look at scheduler.renderEvent and scheduler.templates.event_class
Hiding/Ignoring Weekends in the calendar - take a look at scheduler.ignore_week
Need to have a confirm dialog for a calendar action - take a look at scheduler._dhtmlx_confirm
Minifying Issue
We did find one gotcha with the JS version and MVC in particular that we didn't resolve. If you bundle and minify the dhtmlx's scripts the scheduler breaks as the scheduler object is renamed and becomes undefined. We simply setup the scripts to bundle but not to minify by using Bundle instead of ScriptBundle.
bundles.Add(new Bundle("~/bundles/dhtmlx/calendar").Include(
"~/Scripts/dhtmlx/dhtmlxscheduler.js",
"~/Scripts/dhtmlx/ext/dhtmlxscheduler_limit.js",
"~/Scripts/dhtmlx/ext/dhtmlxscheduler_minical.js",
"~/Scripts/dhtmlx/ext/dhtmlxscheduler_readonly.js"));
I'm sure there is a way to solve that but we weren't too worried about this in our case as this part of the app was not going to be getting high amounts of traffic....
Check this
http://www.codeproject.com/Articles/404647/AJAX-Event-Calendar-Scheduler-for-ASP-NET-MVC-3-in
I will use it in next project

What technology/framework should i use for an ipad web app?

I want to build a web based app targeting ipad. Users will be browsing an interactive menu and submitting orders to the kitchen. It would be nice to tie into an existing pos system but that may not always be an option.
The app needs to be highly responsive and perform like native. Cms would be nice because content changes often.
So what sort of frameworks should i be looking at? Im considering drupal with jquery mobile but i havent found too much info on that combo. Im still open and looking for an expert opinion.
The topic has been covered at the latest drupal conference in Chicago.
Here are the videos:
http://www.archive.org/details/drupalconchi_day2_drupal_on_the_go_with_jquery_mobile
I suggest jQuery mobile on the frontend, plus a backend web framework with a templating system. Any of these should suit your needs:
Django/Python (heavy)
Flask/Python (light)
Rails/Ruby (heavy)
Sinatra/Ruby (light)
Symfony/PHP (heavy)
PHP (light)

Resources