I’m creating a web app with AngularDart 5 and Dart SDK 2.0.0-dev.65.0. What is the best way to include Bootstrap in my web app?
Thanks!
There really isn't anything that will stop you from using bootstrap and angular together.
You can link the CSS, and the necessary JS files in your index.html file and they won't conflict as far as I know.
Now there is going to be a lot of overlap between dart:html, and jQuery. Also bootstrap is going to be in the global namespace so it may conflict with CSS styles if you are using other libraries.
Just use the html structure and classes as normal in the angular components. You can use them anywhere because they are in the global namespace.
If you need your dart code to interact with the JS code you can use package:js.
Related
I have surfed a couple of hours through the web but couldn't find any articles/walkthroughs/comparisons touching erb integration of webpacker. I've found 1 question, unfortunately, the author haven't read docs attentively and the answer was right there, so - no any additional info there.
I have seen plenty of articles about vue and react, but nobody says a word about erb. However, it's quite clear why using react/vue/else similiar, it is not with erb.
The theme is quite vast and I expect a little hate towards me, so I'd ask two related questions (but if you have something to tell more about it - that's appreciated).
As I understand - it's vanilla (plain) js (maybe with a flavour of jQuery) caring just about dom and styling, with all the preprocessing made by rails. If it is so why not just continue using sprockets?
And what are the reasons to choose it instead of some react/vue/else framework?
You may use both : a vanilla JS framework (React, Vue ...) and some erb files. I find it interesting to setup my constant and other configuration variables within a .js.erb file that is generated by my Rails app when building the js app.
Things I like to put in this erb files :
schemas of my api, generated by my serializers
constants, like enum
values to be used in forms
To generalize, you can put anything owned by the backend that will not change at run time
this save you a couple API calls to retrieve this data. However, I tend to stop doing this as your JS app and Rails become tightly coupled and you can't use the sources of your JS app outside the Rails app
I want to use AngularDart and CSS framework, more specifically Zurb Foundation, for responsive applications. I do not want to use Bootstrap (for some reason).
Can AngularDart and Zurb Foundation work out of the box? What are the workarounds, if any?
In Angular.dart you can declare if you want to create components with or without shadowDOM. Existing CSS frameworks usually won't work with shadowDOM. As long as you set useShadowDom to false for your components you are fine.
angular.dart and angularjs works with HTML.
You can use any CSS framework you want, Bootstrap or Zurb Foundation.
You might need to be careful when using javascript plugins because angular need to know about the state of elements.
I'm currently using the Grails resources plugin and I have many modules defined like this one:
bootstrap {
resource url:'js/libs/bootstrap/bootstrap.min.js'
resource url:'css/libs/bootstrap/bootstrap-responsive.css'
resource url:'css/libs/bootstrap/bootstrap-glyphicons.css'
resource url:'css/libs/bootstrap/bootstrap.min.css'
}
This is very convenient because it groups the Javascript and CSS files together into a single conceptual Bootstrap module.
I'm looking into the asset-pipeline plugin now, and it appears that files can only require other files of the same type, which means that I now have two trees of dependencies (CSS & JS) rather than one, which is a problem because there are interdependencies, e.g., bootstrap.js depends on bootstrap.css.
Does the asset-pipeline plugin allow for declaring inter-type dependencies? If not, what is the best way to deal with this issue?
I don't consider this as a problem. Organizing JS and CSS files separately (even though both belong to the same package/product such as Bootstrap) is a good thing and if the JS is not able to refer to the CSS, change the URI.
In my opinion, if you want to use Bootstrap with Grails, try twitter-boostrap.
Checkout my blog post regading Bootstrap CSS templating in Grails and if you want an example, checkout an project I did using Twitter Bootstrap here.
I have been using jQuery for all my projects in PHP, Java etc. but now since I am starting up with Rails, I am bit confused about whether to stick with jQuery or use Prototype. Since Rails by default supports Prototype, is there any added advantage in using Prototype? Would it be fine if I use jQuery? Which JavaScript framework do you guys normally use?
jQuery will now be the default javascript framework in new version of rails. jQuery is best without any doubt.
Prototype came first but jQuery won the JavaScript framework wars. Rails 3 ships with jQuery by default, not Prototype. Use jQuery—it's pretty much the industry standard now.
Rails 3 is framework agnostic, just use whatever you prefer. I use Jquery.
I have a project whose front-end is written in Sproutcore (1.6) and whose back-end is written in Ruby on Rails.
I've been using SCSS in the Sproutcore project and I now need to allow the client to change their colors on the fly. It doesn't have to be instantaneous, but they should be able to select their color, hit save and re-render the page with the new colors. The problem is, Sproutcore compiles the SCSS at build-time meaning I have no control over it once it's built and released.
As far as I've seen, only LESS can be compiled via Javascript at runtime. Does SCSS have this ability as well? If not, could I hack something together using my Ruby on Rails back-end?
There is a Javascript version of SCSS.
https://github.com/bmavity/scss-js
However some things like Parameterized Mixins and Functions are not implemented yet.