How to use Reactjs with rails application in the proper way - javascript

I am a Ruby on Rails developer. Now I've just started with Reactjs. I am really new to this front-end framework. I wonder that should I write all my .html file to .js.jsx file?
I see in rails there are many view helpers such as form, nested form, pagination, .... But if I move to Reactjs, do I have to rewrite these in javascript?
Paginate is too simple in rails with gem will_paginate, but maybe too complex to rewrite in Reactjs.
These all what I wonder should I use reactjs? what are the advantages?
How to use Reactjs in suitable way?

I really like to separate front-end and back-end projects:
Two developers with different skills can work together (you don't need full-stack developers)
You can change your front-end/back-end framework easily
Your code will be really clean
You can have same back-end for all front-ends (web, android, iOS, ...)
You can develop them as separate project and you don't need to wait for rials development. You can go with API dummy sever.
With integration of react and rails maybe you will be fast at first but you won't be scalable as much as separate one.

Related

Django backend with a javascript frontend - best practices

I stumbled upon google's material design web components ("https://material.io/") and would like to implement it in my projects. The only problem is that I've never used a javascript frontend before.
Note: Google's Material Design is the successor of Material Design Lite.
I received a recommendation to learn angular and implement Google's material design components through angular and have my frontend (angular) communicate with my backend (django) through an API.
1- Is this really the best way to proceed if only the web components are needed? Can we not just import the CSS and JS like we did with bootstrap and use Django/jinja to render views?
2- It seems like node.js / NPM is required to use angular and Google's material design, however, is that just during development? Or will we face complications when trying to deploy a django backend and javascript front end?
You can certainly separate your frontend and backend, but I don't think that's necessary in this case. You can definitely import your needed JS and CSS without separating the two, (just make sure that you have them in your base template so that they're accessible to all pages). All you need is a CDN. If you want to use raw SCSS as mentioned in the webpage you linked, you can always use Django scss https://github.com/jrief/django-sass-processor
Onto your second question. Node.js is essentially a platform so that Javascript can run on a server as a backend , as opposed to in a browser. Angular is a frontend framework (just like Django is for python). You don't need node.js to use angular.
NPM (node package manager) is a javascript package manager for node.js, just like pip is a package manager for python. It's not necessary if you're not using node.js.
I don't see anything that would suggest that splitting frontend and backend is necessary for using material design, so you should definitely be either to do so either way. Entirely up to you.

django with angular js vs jus javascript

I want to make a lightening-fast web application and am wondering about the best way to implement it. It's a drawing app that will need support for vector graphics, but it will use a database to store data in user accounts. Here's how I'm breaking it down in MVC terminology:
Controller: Django, hosted on GCP Python app engine
Model: CloudSQL
View: AngularJS
I'm wondering if a Javascript/JQuery approach would be better, since I could have Django handle the database operations and am worried that I'll just be adding overhead with Angular.
I'd welcome any thoughts.
Once you use Javascript framework such as Angular.js and React.js. Your backend and frontend becomes totally isolated. First thing you should do it you gotta make your django REST API. Build your logics to do the vector graphic in your django REST API and build your angular.js app in away that it will "consume" your REST API services.
For the second question, it is depending on your architecture design. If your application is going to be DOM-driven, use jQuery since still jquery still provides lots of UI stuff. However, if it's going to be data-driven and you will use Javascript to organize and display the data in efficient way, choose Angular.js.
Please leave a comment if you have more questions. Thanks!

Recommendations for a web application with Laravel

Im creating a web application with PHP (Laravel 5.) and currently AngularJS (1.). There are some components of the website that i want to build with Angular. For example a Form Generator. A user can click buttons and define which kind of field he/she would like to create. After that, the user can implement it on his website and receive submissions on it. This can be a small app build with Angular.
Currently Angular 2 is a R.C. version, which can be released soon. To keep myself triggered with the newest techniques, i started to explore it a bit and noticed the TypeScript with compiler which runs behind the public(_html) of a application.
Lets split my application in URLs to make my question simpler:
www.domain.com/form-generator -> Uses the script: /angular/form-generator/mainModule.js
www.domain.com/easy-importer -> Uses the script: /angular/easy-importer/mainModule.js
www.domain.com/my-other-small-app-> Uses the script: /angular/my-other-small-app/mainModule.js
Is it possible, efficient and recommendable to create small modules/apps that are loaded on base of the application i build instead of loading them all together? Is Angular 2 recommendable for this or should i consider jQuery and keep Angular 1.*?
If you're looking for a front-end framework to use with Laravel, I reccomend vue.js. Taylor Otwell, the creator of Laravel, has indicated that vue.js is his front-end framework of choice.
Keep in mind, you can use any front-end framework you want. Research what's out there and pick based on your needs. Laravel is not tied to any single front-end: it's your decision.
I only suggest vue.js because it's been adopted by a significant portion of the Laravel community. That community can help you out when you get stuck, and have resources to help you get started. Personally, I watched the Laracasts by Jeffrey Way to get up to speed.

AngularJS applications imply single page applications?

So I just spent the past 5 hours reading up on Angular JS. It seems like a lot of people are heavily associating this framework to single page applications especially when accommodated with a back-end MVC framework with nice API usage like Ruby on Rails or Laravel.
I have 2 main questions that have been boggling me:
How do you initialize such apps considering that the content is
dynamic in nature. When using something like RoR/Laravel, I'd prepare
the HTML with the dynamic data at the back-end and then serve the
initial pages. It seems like most people using Angular serve up a
basic skeleton of the HTML and then do a round trip to web server
again for some data. Is this really how its done? if not, please
suggest a the right way.
Secondly, I dont think I am about to embark on a project with a
single paged application in mind. Does that mean it would be overkill
to use AngularJS for my project. Does anyone have a use case that
they think is appropriate that would require AngularJS with non
single page application that jQuery cant handle easily?

Does Angular.js work with Rails without needing an API?

I am very new to javascript and have mainly been learning Rails previously. I want to be able to make more dynamic websites that give a more dynamic user experience but I am not sure wether to learn Angular.js or JQuery. I want to still serve the web pages through Rails and do not want to get into learning how to build a full SPA and Rails API and connect the two yet.
On the one hand I can see JQuery would be good for adding dynamic interactions to my pages but I have also seen that Angular.js is very popular and many people have told me I should go straight into learning angular. I also like the idea of being able to eventually make full SPAs with Angular in the future.
My main concern is I do not feel ready to start learning how to completely separate my frontend and backend using a rails API and a Javascript framework and would prefer to just add some interactivity to my pages and continue furthering my knowledge of Rails.
Is it possible to use angular to add small amounts of interactivity to multiple pages without having a SPA front end and Rails API?
Thanks for any advice.
Of course you can.
Add html pages to your public folder and put a script reference to AngularJS and you are good to go.

Categories

Resources