Django Rest Framework and Angular - javascript

I am very new to Django Rest Framework (DRF) and AngularJs. What I wandering here is the best way to work with these two.
DRF and AngularJs together (Most of tutorials showed me this) in one project
DRF as backend and AngularJs in frontend as 2 different projects
I am very confused, though I feel the 2nd approach is better. But still not sure. Can please anyone help me in this with pros and cons of both the approaches.

I think the second one is better. In a restful-style project, front-end code is completely decouple with the back-end code.
Besides, separate them into two projects is good for deployment. If you want to upgrade the front-end code, just upload them and restart nginx, front-end code totally is static.

Related

React + Springboot or Springboot only for a project?

My partner and I are building a project for a class this semester. I am currently doing research on what technologies we want to use. So far Springboot for the server side and MySQL or Postgres for the database are strong contenders. I wanted to ask if we should use React or even Angular for our frontend or should we just develop multiple JSP pages for our frontend? So far in my research I have not seen many people combine React and Springboot for projects and it makes me think perhaps I am combining two things not really meant to be combined. Can anybody assist us in deciding the tech stack?
Don't ever write server-side rendered user interfaces. Create a REST api for your backend so that you can have multiple clients querying such api: today, a web app written in angular or react, tomorrow maybe a mobile version.
It depends on so many factors. Some of them are the speed at which you want to finish the project and the quality of the project.
It is a good idea to learn at least one framework and Spring is a good fit.
Regarding the front end, JSP is not a good idea. Both Angular and React are fine as long as you want to learn and develop yourselves. Something in the middle, which may be a bit easier to digest would be Vue.js. Any of these would require a lot of time investment. Since you are already planning to learn Spring and Java then you may use a template engine to make your life easier, something like Thymeleaf. This is a bit old school but it may help you achieve faster results with what you already have.
You also have the option to go on the Javascript or Python directions.
There is no really good answer here, it all depends on what you know, what you want to learn, what you hope to achieve and, of course, the end result.

Thymeleaf or Angular4 with Springboot

I've mostly worked with Springboot framework only with JSP to cover the things I need for the website part. Now, I've got a project to do that mostly revolves, if not all, around the website and I have a couple of questions.
Just to be clear first, I don't have experience either with Thymeleaf or Angular so whichever I pick will be the first time (I think thymeleaf syntax would be easier for me to handle).
Ok so the main goal in my mind is not to render the whole page every time I load data from the backend, so I figure I would have like a header/content/footer parts where every time I click something only the content part would change. Also, I would like the possibility for a loader to show and go away when the content part is changing. This web application will need to be secure for users that register.
I've searched the web to investigate both frameworks, but can not seem to find the right answer so I can continue with my development
I do not mind creating separate REST services in later development if some other platform needs to hook up to the service if I decide to go with Thymeleaf.What do you guys think in what direction should I go, Thymeleaf or Angular? Any help and/or discussion would be much appreciated.
I am sorry if this seems like a general question, but I just need some basic guidelines to start with. Cheers!
I think transitioning to ThymeLeaf is probably going to be the easiest for you, but Angular is a great choice as well, and from there it is up to you. Would you rather use mostly expressions similar to JSTL expressions, but in Spring's SpEL language, then use ThymeLeaf, or would you rather use JavaScript, then use Angular. It just a user's preference for what you are doing.
The fragmenting portion (header, footer, body, etc..) is native to both frameworks. It just depends on which one you want to use. Whatever you go with, to load specific sections while not rendering the others, is going to require AJAX and for you to feel comfortable with how the template frameworks work.
I would suggest reading up on both of them to figure out which one you feel more comfortable with.
Angular
Thymeleaf
Both of them have great documentation for beginners and the Baeldung and Mkyong have good walkthrus for ThymeLeaf. Angular's documentation I found good enough on its own.
For a loader, you can do with simple CSS and JS. There is a ton of demos out there on how to do full screen loaders and how to turn them on or off with JS or CSS. IHateTomatoes has a good article about how to build a full screen loader, that has a No JS fallback option and should give you a good starting point.
Your point about it needing to be secure is a whole other monster. I would look into Spring Security. It's relatively straightforward, especially when using Spring Boot. If you want it can control the users session and assist in preventing session jacking, add CSRF to prevent cross site forgery, control permissions to urls and on down the line, or not. It all just depends.
Either way, don't randomly stab at security, it will end up in something that you feel is secure but it is not, which leaves you and your users in a very bad spot. Again, Baeldung has a great walkthru on the user registration and login process that can help get you started with Spring security and how to tie everything together.
Pretty high level answer, but hopefully gave you some good starting points and some resources.
Build apps decoupling frontend from the backend.
Always build apps following the "The API-first approach"
The API-first approach involves setting up the foundation of your app, which is the application programming interface
For me the differences between Thymeleaf and Angular:
Using Thymeleaf: You don't need to create Restful/web service endpoints on your frontend side because you just need to make calls to the backend from the frontend itself.
Using Angular: Besides of your Restful/ web service endpoints on your backend side, you have to build Restful/ web services endpoints on your frontend side because you don't want to expose direct access from Javascript code to the backend.
Hope this helps and happy coding time!

Can I use EmberJS or other frameworks without gettting its server up?

I want a javascript framework which has features like below:
MV*
Well structured
Html file as template
Rendering fast(maybe virtual dom?)
Combine and compatible with other plugins or libraries
Edit on tablet IDE apps and view in browser immediately by refreshing page after I changed code
When I am at home, I use PC to develop my client-side(or front-end) applications.
When go out, I use my tablet(I have no note PC), so I want to develop my applications outside.
*There are some excellent IDE apps on the Android Market.
Before I know Ember, I have been using pure javascript(jquery) + css + html to develop client-side application for daily practices or work.
But recently, when I began to learn EmberJS, a Javascript MVC framwork, I am lost.
It seems that EmberJS have to get its own server up to compile something, which generate static contents for browser rendering.
I just want to get my client-side code(files) rendering in the browser, but why I have to 'run' it as if I get apache started to serve as a php back-end.
I have googled hundreds of pages to find a solution, nothing expected result discovered.
Including Angular, backbone or any other popular Javascript MV* frameworks, they all must compile there applications.
Is there anyone who has encountered this situation?
Then any advice, please?
Increasingly most Javascript frameworks are shifting to doing a "compile step" as part of using them. This allows you to do a variety of changes to your Javascript files, which in turn makes it easier for you as a developer. An example of this is that you can use ES2015 classes and then have your compile step "transpile" them to older Javascript that will work in all browsers.
The side effect of this though is that you need to have npm running on your computer to be able to do this well.
If you really don't want to have the compile step, then I would suggest looking at VueJS. It's the only recent Javascript framework that allows working with simple non-compiled JS files. But you'all be missing out on some of the best changes to Javascript as a result (ES2015 has made life much better)
Finally, I found a nice solution(framework) that is Durandal.
Really, pure HTML+Javascript without built and server up(anyhow, a web server needed if I wanted to publish it in my hosted web server).
.html extension and designer friendly.
I can upload its source files directly in to S3 and browse the html pages.
Just found some nice examples with well structured project on github is here.
And I can work smoothly with my dear designer friends.
Though its next generation Aurelia will also be built and serve it up like Ember or others, but the current generation is enough for me.
Hope those one got help from this;)

Angular js + Rails good idea?

I have been using rails as backend and some basic css, js for frontend. I am the only one in dev now, but I thought it's better to separate frontend/backend for later when someone else joins as frontend. I was googling for a bit and figured angularjs might be a good combination.
However, I don't quite get other benefits of this combination(rails + angular) other than making separating front-end jobs. What are the other benefits of having angular in rails framework or any cons?
Thanks a lot!
======== EDIT ==============
Sorry that my question was too broad in some way.
In short, I was wondering if there are any reason why angular is such popular combination with rails. Compared to just using rails for everything(front+back), what are some benefits of using angular on the front end + rails backend-api? (speed, simplicity, DRY-er code......etc?).
I just started googling angular for several days now, and before actually getting into it, I wanted to hear from people having experience in it. Thank you.
Angular + Ruby on Rails is a very popular combination. Use rails for api endpoints and angular to retrieve and display data. You can also do most pages with rails and only some components with angular depending on how complex your pages need to be.

How to build a REST client frontend for a REST API backend?

I've built a REST API backend using Django and am now at the stage of designing a client facing frontend. Though, I can't seem to understand how this client frontend should be structured and which languages it should use.
PHP is server-side, and is usually used as the language for building backends. When coupled with a framework such as Codeigniter, it can also be used to play around with sessions, route URLs, and decide which templates to use. Though, I don't believe it can be used to call my REST API to fetch resources (might be wrong here, correct me please if I am).
Javascript is client facing but is used only once the webpage has been fetched from the server. AngularJS is great, but from what I've read, it seems it only helps add very dynamic functionality into already rendered static pages.
I am really open to any ideas, suggestions, and advice based on your experiences creating client frontends. So, back to my original question, how does one structure a REST client frontend, which language is best for this goal, and if which frameworks should one consider to use?
Update 1
Someone asked whether this client frontend will be run in a browser -- the answer is yes, it will. I am trying to build a Twitter-like web client frontend that interacts with a Twitter-like REST API backend. Basically, everything you see there when you go on Twitter's website.
Since it is a browser frontend I would go with HTML/JavaScript only. No need to use PHP or any server side language IMHO. This has the advantage of being extremely portable.
I would also use a JS framework for that purpose ( the trend nowadays seems to be angular).
REST really, really isn't new. It's been a part of HTTP at least as far back as HTTP 1.1
Have a look at this question: Backbone.js frontend with RESTful Rails backend? the top answer lists 20 possible frameworks for building a front end.
Thanks for your help, everyone. Found exactly what I was looking for here:
http://docs.python-requests.org/en/latest/
A nice little library for Python that allows me to basically make calls to a REST backend from within a Django application, which serves as my frontend.
AngularJS will also be used for to make the static pages that Django returns more dynamic. Why? Because AngularJS by itself can be the complete solution only if your whole site consists of one page. If you have multiple pages where each one has it's own set of dynamic elements, you need a combination of Django and AngularJS.
Apparently REST is still quite new and it seems there aren't many people that have stumbled upon this very fundamental question like I have.
Once again, thanks!

Categories

Resources