I'm building a Single Page (Web) Application. I'm quite smitten by Rails v5.0, especially its built-in API capabilities.
In the past I've built JavaScript frontends using Vue.js, usually with the templates provided by the Vue-CLI project. This allows deployment of Vue component-based static sites basically anywhere. It's great.
Now, Rails 5.1 has some built-in Webpack and Yarn features which look pretty compelling too. I'm not sure how to proceed with my new application.
My questions:
What are the pros/cons of integrating Webpack and Vue into Rails itself, using the Webpacker extensions available in Rails v5.1? I
intend to deploy to Heroku.
On the other hand, what are the pros/cons of using the Rails API-only mode for the backend, and maintaning the Vue/Webpack-based
frontend in its own directory? I'd keep everything in the same
repository, deploy the backend via Heroku, and the frontend via a
static host like Netlify.
Which approach would have more cognitive overhead or technical complexity?
Over the past few days, I've been looking around, and I've not found much concise information on the web about this. People seem interested in the auto-reloading features of the Rails development environment, but I get that for free already with Vue-CLI.
As far as I can discern, these are reasons for keeping them separate:
Deployment of the frontend is pretty darn simple to anywhere.
The Webpacker mode for Rails is very new, and not many tutorials or guides exist yet, especially regarding integration testing. Keeping
things separate means that my existing testing apparatus should still
apply.
Here are some pros for integrating the two parts together:
The possibility of using static assets both for the frontend and possibly for server-generated pages in the future, should that be
necessary.
Buy-in to "the Rails way", with implied future maintenance by the Rails team.
the JS Frontend would not need to be hosted separately.
Don't need to worry about CORS (?)
What other concrete benefits exist for either approach?
When i started i went the webpacker way, somewhow because that's what it looked like it was "supposed" to be. As you say, very little guidance.
Webpacker (with it's reliance on the latest node) seems a moving target, making deployment and even development more complex. For what benefit i asked and got rid of it.
Now i use vue from the cdn. Benefits:
cached close to user
almost zero installation
easy to have dev/production versions
The i write app code into the rails templates. Using haml, and in fact ruby2js, but you can use javascript just fine. That's how i started, but i like ruby, and the ruby code is almost half the size than the generated js, but i'm getting off track.
So templates are your "vue annoted" rails templates.
Small code also goes into the rails template.
More code can be defined in the assets and referred to from the app.
Even components can be written into template using the x-template syntax.
And last but not least: Data can be transferred by to_json, directly into the templates. And in the same render. Much faster than an additional query. When to_json is not enough one can use rabl to get exactly what is needed.
I hope i made that clear. I am in the process of writing some vue-rails stuff up, as there is so little to be found. Look out here (and i'll comment when the post is ready)
Related
THE PROBLEM
First a little bit of context: I am currently working as a freelancer, developping webapps using Ruby on Rails. Because I am working solo, the need to optimize my workflow is pretty important.
That's why I have always had the same question since I begun working with Rails:
How can I share code/configuration/conventions/tests between my apps?
More precisely, I want to share:
common gems that I always use, with their configuration
common integration tests, to ensure some conventions
common view helpers, test helpers, extensions to the core classes, javascript/sass partials
common files: .gitignore, git hooks, .eslintrc, configuration files of my CI etc
Some concrete examples of what I need in all my apps:
disable turbolinks by default, to add it later if need be
use javascript instead of coffeescript
use slim instead of ERB
install/configure capistrano
install a CSS framework (bootstrap, bourbon + neat + refills)
So far I don't really have the need to share models nor controllers.
I don't want to share behavior or functional components of the system itself, I am not looking for a micro-services architecture.
I have found that so far when creating new applications, all this setup work does take me a lot of time. Also, I would like to apply it retro-actively to existing apps when I add something new.
I have done quite a bit of research, but I haven't found a lot of answers. Many people are trying to share models, but few people seem to want to share a common ground between all their apps. Finding the right keywords may have been the problem though.
It seems to me that Rails is really good at DRY within an application, not so easy when trying to DRY between applications.
POSSIBLE SOLUTIONS
1 - Rails application template
The solution I am using right now, described in the Rails Application Templates guide, using the same API than the Rails generators described in the Creating and Customizing Rails Generators & Templates guide.
That's the solution used by Thoughtbot, with their popular suspenders gem. In the case of Thoughbot though, they have years of experience to draw from, have many employees and their common setup does not change that much.
Pros:
saves a lot of time when creating a new application
really nice API
Cons:
a lot of duplication: all the apps have the same common code, with the problem of this code getting out-of-sync
not retroactive: useless to add a common feature to already created apps
heavy maintenance work: my current workflow is to go through the git log of my apps once per month, and for each commit that could be common to all the apps I have, add it to the application template, and add it to the other apps manually
So far this solution is not that bad, because I only have two applications. But once I will have more, I will suffer from more and more overhead.
A better solution would be maybe to create a generator/rake task for every common new feature, to be able to apply it quickly to existing apps, and call it directly in the application template for new apps.
I haven't tried it though, and I am not really sure it will work. For example what if I want to propagate a one-line change in an existing common file in all the apps?
2 - Rails Engine
I have tinkered a bit with the Rails Engines to share code.
I have not understood from the Getting Started with Engines guide if I should better use a --full engine or a --mountable one for this specific purpose.
Pros:
once I update the gem version, all the changes are made available to the app
DRY: all the common code is in a unique place (the gem)
Cons:
the gems I would like to share are put in the *.gemspec file, which has not as many features as the Gemfile (from what I understand)
overhead caused by the need to update the version of the gem in all the apps, migrate to the new API of helpers, etc
no way to share non-rails files (.gitignore, git hooks, .eslintrc)
This solution has too many important shortcomings.
3 - Hybrid solution: Rails Application Template + Rails Engine
Maybe the best would actually to use both the above solutions.
In the gem share helpers and tests, in the rails template share the gems, their configuration/files and other files (for git, linters, etc)
It is indeed adding more complexity and overhead...
4 - Use git subtrees
Some people use git subtrees to share folders between multiple webapps.
Cons:
one has to share whole folders, not easy to share everything I would need, in their different target directories in the rails app
seems a bit "hacky" to me
Conclusion
Is there another solution than the ones I mentionned above?
What do you think would be the best way to do it?
How about having a blank "Master" rails app in the git somewhere. With all the settings and configurations you'd like to share. When creating a new app from scratch, you can merge the "Master" into it to apply the defaults. When you have an existing app, same thing, just merge and resolve conflicts as needed.This also gives you the ability to override the merged code if needed to.
Few things I can see wrong with this approach though:
Rails application name could cause a lot of headaches
Any updates could cause merge conflicts
I created a tool to deal with this when working in nodejs projects. But the tool is really just a command line tool so you should be able to use it.
https://github.com/tomasbjerre/dictator-builder
It is a concept with creating a dictator that dictates parts of your code base.
I have started a new project in which I would like to use React and Rails. This project is on the small side and will require some basic interactive UI, hence React. As far as I know there are two ways I could get started with this:
Using the react-rails gem and use the built in view helper
Create a Rails API and React/Flux frontend app
I have a few questions however. In no particular order:
React-rails seems like the simpler solution, but what drawbacks would I be facing?
I come from a Rails and Ember background so the Rails API + React FE solution makes architectural sense to me. But with the react-rails gem I'm confused on how some things should be done. Primarily, how do I handle routing? I suppose I won't have access to any react route helpers and will need to pass paths into the react components as props?
Thanks in advance!
For a small project React-Rails, https://github.com/reactjs/react-rails, is great I have used it in production the last year on 2 sites that get about hundred thousand visitors a month and I haven't had any issues.
That said if you want to use Redux, React-Router or Flux don't use React-Rails go the API route.
My rule is if you are just using React components then use React-Rails.
If you are doing a Redux, Flux app then just make a frontend app.
It depends on how much your server is doing and also your team. If you have a lot of business logic that you want to keep in Rails, then you may want to have that logic running on a dedicated Rails server and expose as APIs.
You can then have a NodeJS server that does nothing but fetch data from APIs and render React to send to the users. The only interaction between react and rails is via the APIs as JSON. This basic setup will scale really well and is a pretty simple mental model.
If the project gets bigger, this means you can have JS-only devs work in JS only and Rails devs work in Rails only. Plus if you want to move away from Rails or React later, there's no added complexity there.
OR
If all your devs are React+Rails and the project is a bit small for multiple servers, then I think using react-rails to serve up your pages is a fine solution.
I've been using Ruby on Rails since a little more than one year now and I've always do it in a casual way, I mean, everything in one place (front & back), using the standard .html.erb file populated by the associated controller method.
Otherwise, today in our project, I have the need to separate the front and the back end for multiples reasons (code maintainability / clarity, better architecture, more reactivity, etc...).
I've done plenty of researches, watch some conferences (1, 2, 3), but didn't find my solution yet. It looks like to be a question that comes often, but what is the best practice/tools to separate the backend and the frontend of a Ruby on Rails app?
I don't feel we need (yet) a huge JS framework like React/EmberJS/Angular/etc...
First I was thinking about something like Middleman/Jekyll and make the communication via JSON and API calls, but it seems like that it's not a good solution for dynamic website.
So is there a frontend framework that works well with a Rails API and which is easily maintainable and upgradable (add feature/extension to it like gems)?
Thanks for your insights.
A friend of mine wrote this great article/tutorial on Rails as a backend API.
http://blog.launchacademy.com/the-basics-of-building-an-api-in-ruby-on-rails/
As well as this tutorial on Rails/Ember.js
https://github.com/diegodesouza/Project-Planner-EmberJS
You can get an idea of how it's done and implement your preferred front end framework.
Hope it sheds some light on this question.
I have a similar setup as one of the commenters on the question.
I'm using Rails mainly for just the project structure, to define some page layouts, and for ActiveRecord.
I then have my JSON APIs defined using the Grape API framework.
I have a SPA, written on AngularJS that lives in the public/ folder. It doubles as my mobile app, made possible by phonegap. If my Angular app didn't double as my mobile app, I could've possibly just used the asset pipeline to serve up the SPA. To compensate for that, I have a separate build task written in Grunt to minify/uglify my JS/CSS assets before I deploy them out to production.
I also use Comfortable Mexican Sofa for my static content pages.
It took some trial and error to get things right, but overall I find that this setup serves me pretty well.
We have a project that is going to have multiple Single Page Apps (eg. a Calendar app, a Budgeting app, etc.) built in AngularJS and using Rails as a back-end. It will also have a large part of the site operating as a normal Rails site - ie. RESTful MVC (eg. resources :users, :events, ...).
In the past, our SPAs have lived on a separate server from the back-end, which was delivered by a third-party (Quickbase) and wasn't under Version Control. Now that we're going to be controlling and developing both the SPAs and the RESTful Rails site/back-end the question is how connected/separate should these components be?
Since the SPA will rely on the back-end for data, does that couple them enough that it should be included as part of the same Git repo?
Or should they be separated for the sake of maintainability, ease of development, modularity, etc. particularly since they could each be seen as standalone pieces of work?
Should the SPAs be kept within the Rails directory structure so that they can be served up by Rails and take advantage of the asset pipeline, etc?
If the SPAs should be kept within the Rails directory structure but should also be separate in version control, how can that be done with them sharing a directory structure?
Not a rails developer but just tossing in my two cents. I do full stack development MySQL -> PHP (Slim PHP framework for routing/RESTfulness), AngularJS. Currently my workflow is to have all the PHP and AngularJS for a project in one Git repo, really this flows from using Grunt though rather than being a fully conscious decision. I use Grunt to run the live reload server and added a bit to the base configuration (from yeoman) to handle the PHP portion so that also causes a live-reload which is nice during development.
Regarding code separation, having a RESTful interface for the backend that is completely decoupled from the front-end is your best route, since this leaves you open to completely re-write the front-end without changing the back end (or vice versa). I'd say anything that breaks this isn't really worth it, if you can't maintain this abstraction you lose the ability to replace one part without rewriting the other.
I would say if you have a piece of the Rails back end code you feel can truly stand on it's own and be used on various projects then perhaps that part should be extracted into it's own repo.
I've been using online tutorials to learn ROR. I've used www.lynda.com video lessons to get a basic idea what Rails is all about, and for practice I used Rails version 2.0.2, during my training period. But now I'm into a development team in a starter company where there are no senior/experienced programmers to assist me and we're working on gitorious source code modification using Rails 2.3.8. I'm facing a lot of difficulties to understand the source code and some of the major differences I could notice is as follows:
Inclusion of XML and HTML to render views in scaffolds, in Rails 2.3.8(I don't understand what this is, as I'd never come across this during my training period using Rails 2.0.2)
In gitorious source directory, in addition to Controllers, Models, Views and Helpers there are two more directories namely, Processors and Metals. I don't understand what their significance is.
Extensive usage of .yml files. What are those for? In rails 2.0.2, all I came across was the database.yml. Now, in gitorious, I see gitorious.yml. How are all these so customized? I mean, how do rails app(controllers, models, etc..) communicate with gitorious.yml?
With respect to all these questions, how do I move a level or two up, to call myself an "intermediate Rails programmer" from "Rails novice programmer"? and how do I stay updated of new api, deprecations, in all upcoming Rails transitions?
Inclusion of XML and HTML to render views in scaffolds, in Rails 2.3.8
Yes, the way scaffolding works has changed - I can't remember exactly when it changed, but I can certainly believe the change happened between 2.0 and 2.3.
When you generated a scaffold the old way, it would just include 'scaffold' commands in the controller, which would render up a default interface for each of the actions until you replaced them with your own HTML templates.
The new way actually generates the HTML templates as files: so, in the views directory, there will be a directory containing ERb (HTML with embedded Ruby). You can then go and edit those directly.
It also renders XML - this is done by default, but you can choose what other formats are produced. Rails lets you produce multiple output formats for each controller action - so that you can easily produce RESTful web services. So, you obviously produce XML by default, but you may want to produce machine other formats too: XML (including RSS/Atom), JSON (and JSON-P etc.), RDF, YAML. I use this to produce CSV and Excel so users of the site can get data exported to their spreadsheet package.
In gitorious source directory, in
addition to Controllers, Models, Views
and Helpers there are two more
directories namely, Processors and
Metals. I don't understand what their
significance is.
processors/ is used by ActiveMessaging - it contains ActiveMessaging processors - basically code that gets called as part of communication with a message queue that ActiveMessaging is hooked up to.
metal/ contains code that can best be characterized as 'middleware' - basically, to deploy a Rails application you use a library called Rack which abstracts away the interface between the server and the app itself. It allows you to use the same web server and other infrastructure and switch between different Ruby frameworks - so, if you are using Rails or Sinatra or Merb, Rack lets them all communicate with the same server.
Now, Rack allows you to write 'Metal' code, which is code that gets run directly on the server without the framework getting in the way. The reason you write Metal code is for performance - when Metal code is running, it is running directly rather than with the weight of the Rails framework getting in the way. This way, you can get better performance. I haven't ever had to write any Metal code, so I can't really explain it beyond that.
Extensive usage of .yml files. What
are those for? In rails 2.0.2, all I
came across was the database.yml. Now,
in gitorious, I see gitorious.yml. How
are all these so customized? I mean,
how do rails app(controllers, models,
etc..) communicate with gitorious.yml?
.yml files are files in the YAML format. In Rails, these are mostly used for configuration. Just as XML files are used by Java applications for configuration, .rc files are used in Unix for configuration and .ini files are (were?) used for various apps on Windows for configuration, you can store data in the YAML file which the Rails app uses for configuration. Because of the simplicity of the format, a lot of Ruby and Rails apps use YAML for configuration files.
Ruby has a built-in YAML module that loads these in using methods in the YAML module including YAML.load, YAML.load_file, YAML.load_documents etc. To see how they are being loaded in, I suggest the easiest thing is to find the string "YAML." in the project - or, indeed, the name of the yml files.
With respect to all these questions,
how do I move a level or two up, to
call myself an "intermediate Rails
programmer" from "Rails novice
programmer"? and how do I stay updated
of new api, deprecations, in all
upcoming Rails transitions?
I would suggest that a fair amount of conservatism is appropriate with Rails updates. I'm still using Rails 2.3.3 on a production site, and that's fine. I should probably upgrade to 2.3.8, but I tend to not run with the bleeding edge on production projects.
As for the best way to learn, I'd suggest that you work through Railscasts - these are excellent short screencasts that describe all sorts of useful techniques and help you learn lots about the Rails framework. When you need to do something, obviously there is the API docs - which are okay. The Rails Guides are pretty good and worth reading.
As for books, there's Agile Web Development with Rails - which is a pretty good tutorial. There's also The Rails Way, which is a massive desk reference and in my experience one of the only good ways to learn about some of the minutiae. You might also want to check the StackOverflow question What’s the best resource for learning Rails for a raw beginner? - because although you obviously aren't a raw beginner, the resources recommended are up-to-date and useful for going from novice to intermediate and on upwards. Good luck!