What are the reasons to use erb integration for webpacker in Rails 6? - ruby-on-rails

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

Related

Can a Rails application template include generator parameters?

When I start a new Rails application, I often use certain parameters to rails new like --skip-spring or --skip-turbolinks.
I understand I can put these in ~/.railsrc, but when using multiple dev computers, it can be a bit tedious to keep railsrc files in sync across all of them.
Can I use application templates to add these parameters to the generator? That would be great, because application templates can be referenced by a url and downloaded on the fly.
(Also I know I can use templates to make changes after the application is created, so I can remove spring or turbolinks or whatever, but it would be much nicer to never generate the app that way.)
To answer my own question after looking into how this works, I think the short answer is that it's not possible to add generator parameters from an application template to rails new itself. The reason is that the template code only runs when the application is already generated.

General advice and recommended folder structure - Sinatra

How would you structure a simple Sinatra app?
I'm making it right now and I want the app to have these features:
The "app" is more of an admin dashboard for all the information inside it. Then another app will access the information via REST. I have not created the dashboard yet, just the getting of things from the database
Sessions and authentication (have not implemented this yet)
You can upload pictures, and other the other app can display those pictures
I have created a testing file using RSpec
Reports generation via Prawn
Currently the setup is just this:
app.rb
test_app.rb
because I have literally just the app and testing file. So far I have used Datamapper for the ORM, SQLite for the database. This is my first Ruby/Sinatra project, so any and all advice is welcome - what other libraries should I be using, should I put stuff like config.ru, etc.
Sinatra is not opinionated when it comes to your file structure, you can place files however you like. When I first started I just dropped everything in the top level, but over time reading how people structure their code, reading over the source code of gems I've broken up my code into smaller .rb files that fulfill a specific function and places all of them under /lib, it's a convention carried over from rails perhaps but does not have any of the magic associated with it in rails. If you use scss or coffee script they depend on certain folders to exist, you will discover for yourself over time (and even then you can reconfigure them however you wish) and from this you will figure out what works best for you.
if you write a restful api, check out grape - https://github.com/intridea/grape
you will also find sinatra-contrib to be very useful - https://github.com/sinatra/sinatra-contrib
As for what to do with your config.ru - https://github.com/rack/rack/wiki/%28tutorial%29-rackup-howto

Separating Angularjs and Rails apps as standalone components

I wanted to try out Angularjs. However, I have been trouble deciding on where I should located my angular app.
I am using Rails framework for the backend. I have seen tutorials where the entire angular app lives under the assets/javascript folder.
I was wondering if instead of living within the assets/javascript folder, I could make it live outside my rails directory entirely. That way, I can potentially separate my backend and front end entirely. (Is this recommended?).
I believe the asset pipeline also precompiles a lot of the assets. If I were to separate out the angularjs asset, would I need to precompile the assets somehow?
Thanks
I've been working through a similar set of questions. There are some good tools that allow you to integrate AngularJS directly into your rails asset pipeline, and they to me look good if you want just a little bit of Angular.
However, if you want a full Angular front-end, aka a single page web app, I think you'll eventually be limited by compatibility and some of the tooling. I feel like the Rails gems won't quite keep up with Angular, and so you'll be into version conflicts. I've also seen more and more tooling for Angular as a standalone, and I very much like the ng-boilerplate project template. I also like much of the testing tooling such as karma, and I haven't really sorted out a way to integrate karma with rails.
For that reason, I eventually decided that I'd keep the two separate. Initially, I did that through creating a rails application and a separate angular application (separate directories). I used ng-boilerplate as the framework for the angular end. I wrote a tutorial on that. This eventually got a bit frustrating, and I wrote some more thoughts on it, the main annoyance was that I had two git repositories and it was annoying to keep them in synch. It's also sort of annoying working with an IDE across two directories. I've ended up shifting to rails and angular being in the same folder, and they seem to play nice, as each uses different directories within that project.
In this current structure, I'm using the grunt setup that came with ng-boilerplate to minify all the code, package it and also run karma unit testing. I haven't yet nailed the end-to-end testing, but it's on my list. I've found this to be a relatively productive work environment. My chosen structure for my pages, controllers and karma test cases has some repeated code (I'm choosing not to factor it out to maintain readability). I'm planning to extend the rails scaffold generator to create the javascript framework for me - so when I create a persons rails scaffold, it will also create a persons angularjs scaffold for me. I'll update here if and when I do that work.
EDIT: I've completed the scaffolding work as well, which allows rails to automatically generate the angularJS elements when you generate the rails models/controllers etc. The blog post is here: http://technpol.wordpress.com/2013/09/24/rails-generator-to-generate-angular-views/
You could use a grunt based workflow:
How to manage AngularJS workflow with lots of script files
http://newtriks.com/2013/06/11/automating-angularjs-with-yeoman-grunt-and-bower/
If you start with a decoupled frontend, use mocks at first so you can stay within angular and not lose focus switching between backend and frontend logic. An advantage of building a single page application is that you can develop it independently of the backend api. See (http://docs.angularjs.org/api/ngMockE2E.$httpBackend) for information about mocking http responses.
We have been using AngularJS with our Rails application, in a way where we have been using Rails ERB templates, but switch over to using ng directive as and when required.
For this above setup we have used bower/bower-rails gem, which lets us use bower to manage the angular packages and their dependencies. We commit this into our repo, in the javascripts directory, and is taken care of by the Rails asset pipeline.
This setup has worked well for us considering we have above 50-50 % split of our views between the ERB templates and Angularjs.
More about this setup in the links below:
http://angular-rails.com/bootstrap.html
http://pete-hamilton.co.uk/2013/07/13/angularjs-and-rails-with-bower/
http://start.jcolemorrison.com/setting-up-an-angularjs-and-rails-4-1-project/
There are many advantages of separating out your api service (rails in this case) and your frontend components. As we do for ios/android apps, angular client can live on its own as a separate entity. It will be a static website that can be deployed on s3 or any static website host. It just needs to communicate with your api service. You could setup CORS to make it possible.
Some advantages of this workflow
You could use rails-api, which is a subset of rails application. If you are just going to use rails to build apis, it doesnt make sense to have all functionality that a complete rails app provides. Its lightweight, faster and inclined more towards building API first arch than a MVC arch.
You could use yeoman angular-generator to generate an angular app and make the most of grunt & bower to manage build (concat,uglify,cdnify etc) and dependencies (angular modules).
Deployments will become flexible. You won't need to depend on one to push the other.
If you ever plan to change your backend stack (eg rails to play/revel), you would not need to worry about your client components.
By splitting the development of the frontend and the Rails backend you could distribute the work over two development teams and keep the application as a whole very extensible.
There is also one downside to this approach.
By having the applications in two separate repositories, you can’t easily have a full integration test. So you will have to test the apps separately. You could mock your apis to test angular app.
We have been using this approach and would recommend others the same.
Less dependency & more productivity.

Can an admin template be used in a Ruby on Rails web app?

I have been doing UI research and have come across admin templates at http://themeforest.net/. I was wondering how do you apply these onto a web app built on Rails. These templates look very similar to wordpress themes. Are they that easy to configure? Is it just as simple as setting up a link to the database to make the fields form capture data? I've been looking at this theme.
For admin templates I recommend using Active Admin. It's relatively easy to implement and gives you great admin screens with little effort.
Yes, You can. I'm trying to solve the same problem and so far I have a couple options:
1.) do it by hand, I've done this before, it works but takes a lot of time to truly understand how your theme is put together. First I would recommend using the included themes assets exactly as they are bundled with the theme. Don't assume that just because you have twitter-bootstrap-rails gem that the bootstrap classes in the theme will work. Link the assets statically and slowly extract out the static assets and replace them in the asset pipeline once you know they work.
2.) Use the strategy suggested in the install_theme gem (http://drnicwilliams.com/2009/10/06/install-any-html-themetemplate-into-your-rails-app/) the gem itself is not maintained any longer (i'm not sure about any forks), but the strategy is sound. Extract the core parts of the template into partials.
The short answer is yes, but there is no straight forward way to "import to rails"

Checking CSS within a rails controller or in plain ruby?

I need to take a database text field and parse it for
duplication and garbage
malice
whitelisted selectors
compress and output as a css file
Since there might be a rails way I'm unaware or something ready made I'm asking before I waste time trying to reinvent a wheel. My searching revealed nothing, mostly in rails seems aimed at view level, and css seems to be an unattended niche in this area (plenty of html though).
I'm aware of the sanitize gem (doesn't do css immediately, yet another thing I'd need to map out and code) and the built in rails stuff (not a lot of tutorial, aimed mostly at the view level). I need a gem, lib, module or something similar that I can work with in a controller or queue.
EDIT:
Without getting too deep into the specifics of the project: administrative users can add css for their portions of the site. As part of the flow I'm going to save the raw css and then process and save the processed css. The db stuff is archival mostly, the css file is output immediately. Because there is few places to add modified css and only admins have access to the css, it sort of works but I'm looking to make it more robust in the future where admins who may not be as conversant with the security needs or not as css aware can operate.
The most basic example is that it just a text field on an admin page. The admin cuts and pastes css there, submits, and the application turns it into a css file that gets included with the designated pages, which works because the current admins know the application, the css of the application, and what they can and cannot change. The goal is to make this more robust for future admins who might not be as savvy.
To simply sanitize CSS, you can use the SanitizeHelper built into Rails: http://api.rubyonrails.org/classes/ActionView/Helpers/SanitizeHelper.html#method-i-sanitize_css
Have you looked at Sass? It has all of the parsing logic built in, for a superset of CSS. You could add a feature (Sass support) and save yourself the need to parse/validate the CSS all in one go.
You can generate output CSS from Sass (or just plain CSS, since Sass [with the SCSS syntax] is a fully-backward-compatible superset of CSS) like this:
output_css = Sass::Engine.new(sass_content, :syntax => :scss).render
There are a bunch of options that you'll probably want to look into at http://sass-lang.com/
Another option is Less. The new Twitter Bootstrap framework uses Less, and Rails 3.1 uses Sass. The biggest difference is that the official Less parser/compiler is built in JavaScript, so you could actually validate and compile in the user's browser while they work and show them any errors before they save. Of course then you need to run a JavaScript engine (e.g. V8) in your Rails application if you want to use Less to validate the incoming CSS still.

Resources