React + Springboot or Springboot only for a project? - javascript

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.

Related

Best practice to develop a separate front-end for my API?

I have a Back-end web application that provides me with custom API endpoints (Java - Spring). I like to keep everything separate. one API application that provides everything else remotely. My question is: What is the best practice to start a new Front-end project that connects to my API?
Requirements:
The Front-end project should be on a different server
The Front-end project should support routing, meaning I will have full control regarding the /paths. so no .extensions at the end.
SEO is very important in this specific case.
My preference is to go with React.js but I have doubts regarding SEO because the project I want to migrate from is WordPress (up and running with a good SEO performance).
I wish that I can find a simple solution with pure HTML, CSS and some kind of JavaScript.
Thank you.
React isn't actually bad for SEO. So long as you're taking the proper steps to ensure that the page load time isn't bad. If the site that you're migrating is massive, make sure you're lazy loading.
If you have doubts that Google or other search engines will render the js, then I suggest going with Nextjs like Rakesh K mentioned.
There's also nothing wrong with recreating the site with a templating language like Handlebars, then rendering it on an Express server, or whatever suits you. Just including this option in case you don't know React, and don't want to have to learn it.

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!

When should one opt for a Isomorphic Javascript application

There are a whole lot of new tutorials and examples popping up about this Isomorphic thing with react.js and how good it is.
For beginners like me, it is quite difficult to decide if this is needed or not.
Short example:
My application will be most of the time offline. The user will be able to create a questionnaire/survey and interview people who will answer this. After the questionnaire/survey is completed, he will need to call the node.js backend to download a Word document based on the answers.
So basically im asking if there is any reason creating an Isomorphic web application when it is a small simple and offline based?
Is there any simple node.js (express.js) + react.js + redux.js tutorial/exmplae out there which is not over complicated like the Isomorphic ones?
My true story, the suggestion is, the choice always follows the need.
when to use isomorphic infrastructure :
heavily SEO requirement, especially when u have to render same value in front-end & back-end.
global state management and business logic, relatively maintainable.
However, if you have an existed API or backend server (no matter nodejs or not) , the isomorphic could not be a better solution. BTW, You can just emit the backend codes in these isomorphic boilerplate (what I exactly do).
I recommend este

Recommended approach to writing a client-side JavaScript application

I'm considering learning JavaScript and I thought, what better way than to write an app! The idea is to make a simple school enrollment app, where the user would input enrolled student data and the app would automatically assign students to user-defined groups based on their enrollment score and group preferences.
Here are some basic ideas:
Everything happens on the client side, I just provide the logic
I don't want any of their data because it may be confidential/personal. I would consider gathering some usage statistics. To prevent them loosing their progress I would use Web Storage
As output I want to produce CSV documents, one per defined group, each containing a list of assigned students
Preferably the app will be a Wizard-like SPA.
Now for my question, I want to know 1) if there are any good resources (books, online trainings, etc.) about building such applications and 2) which libraries/frameworks are worth looking at. Please keep in mind I do want to learn the language, so I don't want tools that will do everything for me.
There are many great resources out there. I would suggest knowing Javascript first and some good tutorials are hosted at codeacademy.com. If you would like more knowledge, get a book and practice a bit through their tutorials.
I would recommend looking up some of these: Backbone, Ember and AngularJS seem to be the most popular. They are usually highly functional and easy to jump into with little javascript knowledge.They all usually include a type of routing, 2 way data-binding and a bit of extra goodies that make them unique. Explore them to find exactly what you need.
Angular: (link: https://docs.angularjs.org/tutorial/step_00) I would recommend going through the AngularJs tutorial (if you choose that framework). They teach you how to use node, karma and how their framework is set up with the seed data. This is maintained by Google so it may have a long future.
Ember.js: (link: http://emberjs.com/guides/) Has alot of tutorials and guides on how to use the framework.
Backbone.js: This is very popular and they have alot of real examples that is used by this framework.
Ofcos there are. You should seriously consider angularjs. There are plenty tutorials that has examples on user management . look up Concrete's blog on angularjs. Its also a SPA framework.

Questions about MVC in Javascript and in general

First, I would like to ask some very basic questions about MVC in general. Simple questions, but can't find any good answer for them.
Is MVC useful for a one man project, or is it only needed, when more people work on a project to make it easier to co-op?
How big a project needs to be, to make good use of MVC. I hear everywere that I should always use MVC, but even for big projects it looks like an overkill. I can't imagine how big something would need to be, for all this overcomplicating to pay off.
I have made a single player rpg that is pretty short, and I am trying to turn it into massive multiplayer. It is all for educational purpose only. So I was thinking to redo it with MVC, but even though it has a lot of functions and data to process it still looks way to simple and clear, to bother with MVC. Maybe if I am making so small projects that I can't see the benefits of using it, I just shouldn't use it?
Will using all the MVC additional code slow down my app in visible way?
Now about Javascript, there are some solutions for MVC avaliable. Are they worth using?
Thanks
MVC is just a pattern, guidelines to organize your project and decoupling your code, so the size of the team or the project is not relevant. I've made by myself a very simple website with a list and a couple of web forms using MVC and it was pretty faster to develop than other alternatives. If you have the opportunity to work with a powerful IDE like Visual Studio, you will find that most of the common things to do for building a web page/site are already automated. And I also have worked with 12 people in a bigger project using also an MVC approach without noticing differences.
One of the main advantages of using MVC is that you can change the whole front end in the future without having to make changes in your model or controller layer.
Also, using MVC doesn't have to slow down your code, it depends on your implementation. When using ASP.MVC instead of ASP.NET, for example, the code and download times are faster, in fact. With ASP.MVC you get rid of nonsense ViewState pieces of code and the html code generated is cleaner.
In my experience, MVC is an excellent pattern to chose for working in web projects, since the front end technologies are changing very fast and it gives the flexibility to evolve with them without having to annoy about the business logic.
I hope I have helped you.
You can find more info in:
http://www.asp.net/mvc

Categories

Resources