Develop Reference

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.

Prototyping for UX: dev plan + jQuery / Framework?

I started to work as a UX designer and until recently have been prototyping using visual tools like Axure or Balsamiq mockups.I've always been drawn to coding though and want to become more code-oriented in my prototyping skills.
I'd like to know your opinion on choosing the right development path in my particular situation. Briefly:
What I know:
HTML + CSS, Bootstrap 4 basics, basic coding concepts (like variables, functions, classes etc.) I recently started to learn vanilla JS basic concepts.
What I want to be able to do
rapidly prototype (in order of importance!) 1. apps(!), 2. dashboards(!), 3. mobile apps, 4. web sites
have intermediate understanding of code and ability to modify it
create dynamic, animated graphs (d3.js?)
(important) dynamic animations of UI elements
Goals:
First of all I want to plan my coding schedule for next 4-5 years in advance. I understand there is no best tool and perfect path, that's why I want to follow "good enough" path.
I don't necessarily look for the newest and shiniest technology. For my purposes it needs to be efficient today and shouldn't die in a few years.
Questions:
I think it's a good idea to keep learning JS to say intermediate point,until I'll get into frameworks/libraries. That's the usual advice, but on the other hand, I only need code as far as prototyping is concerned, maybe results would come faster if I skip to frameworks directly?
If my goal is just prototyping is it still bad idea to learn jQuery afterwards? I see a lot of bad reviews recently. Should I consider (and why) any other frameworks/libs like React? In other words are there any advantages of say React over jQuery for my purposes?
Can I still use css frameworks with JS Frameworks? The concept of latter is to complicated for my now and I wonder if they can be useful for prototyping purposes or it's just a tool for professional developers (so many options, so many tools!).
Thanks!

I think it's a good idea to keep learning JS to say intermediate
point,until I'll get into frameworks/libraries. That's the usual
advice, but on the other hand, I only need code as far as prototyping
is concerned, maybe results would come faster if I skip to frameworks
directly?
Often frameworks have a clear documentation of their functions and methods and therefore I think jumping into a framework directly would spare some time. On parallel learning JS is quite important in order to recognize JS formats and modify your requirements. I would just focus on a framework with a specific goal. Try to implement it and if you encounter some errors just google it, you will definitely find some stack overflow questions.
If my goal is just prototyping is it still bad idea to learn jQuery
afterwards? I see a lot of bad reviews recently. Should I consider
(and why) any other frameworks/libs like React? In other words are
there any advantages of say React over jQuery for my purposes?
It is never bad to learn jQuery. A lot of external libraries are build based on jQuery. I would really recommend this book: "Jon Duckett-
JavaScript & JQuery" which will help you understand the basics of jQuery. I do not see any advantages of React over jQuery. Perhaps some other people have different thoughts about that.
Can I still use css frameworks with JS Frameworks? The concept of
latter is to complicated for my now and I wonder if they can be useful
for prototyping purposes or it's just a tool for professional
developers (so many options, so many tools!).
Sure, JS Frameworks often only focus on creating dynamic content or establishing functionality within your prototype. It does not really influence your CSS. You can easily use for example node.js in combination with bootstrap CSS .

Building web applications with tools that last

I recently began as a web designer but spend more and more time learning front end web development. I enjoy Javascript and the work. I am very interested in creating web applications unfortunately I find that Javascript frameworks change so quickly. I began learning Angular 1.3 only to find the release of 2.0 to kill my interest. I also worry that learning frameworks will not help my skill as a developer only as a framework user. It makes me want to just develop with modular Vanilla.
What recommendations do you have for creating web applications with this problem in mind? I greatly appreciate your comments.

One of the best things you can learn as a developer is to ALWAYS find a solution before creating one.
Yes, vanilla Javascript surely has it's place, for as you progress as a developer, you too will want to write your own javascript.
I recently just got into MEAN stack development, and I can definitely say if I were to try to write all of this by hand, especially if your not an expert, would be a nightmare, if not impossible/impractical.
I understand the craving / desire, we all have it. We start to code and feel like wizards when we can conjure up this neat program we build all by ourselves. But we also have to realize there is a little bit of reasoning behind utilizing frameworks, just take this into perspective, taking MEAN stack as an example,
Right now, there are a team of developers working on MongoDB, a team of developers working on Angular, Express, NodeJS etc.
Each of these frameworks is being FOCUSED on and perfected, think about that for a second. These aren't things that are just thrown together, these are strong written frameworks, and when combined together, can make an awesome toolset.
Building your own library can also be a good idea, and I would encourage it, especially for CUSTOM solutions. This can be fun and creative.
However, as for making the strongest web framework you can have, it would take more work than whats practical. Utilizing the work of others is one of the most important things you can do as a developer! Good luck.

You could resort to Google Trends to figure out which technologies last and where the trend is going. A quick research points very much to the study of jQuery (even though AngularJS trend is more impressive):
http://www.google.com/trends/explore#q=AngularJS%2C%20%2Fm%2F0268gyp%2C%20%2Fm%2F02p97&cmpt=q&tz=
Going Vanilla is always a good idea in order to strengthen your understanding of the fundamentals - learning some popular frameworks is essential to work productively and find good projects!

JS Plugin Load Issue

What combination of libraries/frameworks would perform best for an HTML5/CSS3/JS app with moving elements? I have definitely done my homework, but I am diving into a world I don't know very well... as far as performance goes at least. Are there principles I should understand before I manipulate, perform logic on and animate DOM elements?
I am going to use AngularJS if I can and should (i'm fairly familiar with the basics now), and my best research has pointed me towards Steroids.js. There are just so many libraries and PhoneGap-like frameworks! Here's what I have found...
This post helped me, but just to get started
Require.js
BindOnce
Titanium
Sencha
Construct 2
WebGL/three.js
FireBase
AngularFire
In short, is there any sort of resource/documentation/reference or testing method of JavaScript load? Or is there any kind of simple answer to this (outside of giving up and learning Objective C, I would really like to be able to use the languages I already know. Thanks for the read :)

In the end, if you want more native functionality to be part of your app, you will have to learn at least two other languages outside of JS: ObjC and Android-flavored Java.
My experience with Cordova was enough to convince me that aiming for a perfectly native-feeling app with Cordova requires you to essentially rebuild a large amount of native functionality in JS, which places you firmly at the mercy of the web core that each OS uses and their limitations. Eventually, you will find yourself using so many libraries to emulate what you can do with the native languages, that the sheer weight of dependencies and their management can very quickly leave you trying to debug shadows.
Even then, there will be things that you have to find hacks for to get near-native functionality for, and performance will hardly ever be as good as a native-language app, especially if you have to load data or resources from outside your application.
My suggestion is that if you must use something like Cordova, give up on the idea that you're going to be creating a 100% native feeling app. If a UI element doesn't work like its native equivalent, don't spend a lot of time trying to force it to work counter to its web roots. Style it appropriately so that users aren't confused by it breaking native conventions, and move on. If you try to fix everything that looks like but acts not /quite/ right, you're going to find yourself in dependency hell and /still/ having to touch native (Java or ObjC) code to get the plugins to work right.

Can anyone suggest a good client-side architecture and structure for large scale web applications? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I'm building a large scale web application. It will grow in the future so I need a good back-end and front-end architecture for my application. at the back of the site, I use Zend Framework so the architecture is OK for me. But at the front, working with javascript and ajax without having a good architecture makes later changes hard and confusing.
For now, I'm using my own architecture. I have a big object for the whole application say BigObject. I extend it when modules are added to the site. say I have an upload module. I use this:
BigObject.upload={
//initialization
init:function(){
},
//I tried to use what I named semi-MVC architecture!!!
controllers:{
//index is a controller
someController:{
init:function(){
//initialization
},
someAction:function(){
//Code goes here
//call a model if necessary
//call view script
BigObject.upload.views.someController.someAction();
}
}
},
models:{
//models required for this module like loading contents with ajax.
loadContent:function(part,callback){
}
}
views:{
init:function(){
//initialize view
},
someController:{
someAction:function(){
}
}
}
}
What do you think? Is there any better solution to this problem? anyone thought about a good structure for front-end part of web applications ( like what we have at back-end,good file structure and object-oriented methods )?

The most up to date answer to this question in 2020, would be to use React + GraphQL + Styled-Components. The best place to start with React is the official Create React App tool. Their are a few different implementations of GraphQL; on the client side the clear leader is Apollo. On the server you have a lot more choice and it is reasonably easy to even roll your own server implementation, so go with what work best with your current backend. Styled-Components gives you CSS in JS, in the same way that React gives you HTML in JS.
For a more complete and opinionated experience, take a look at Gatsby, which brings all of the above into a single framework.
Over the last couple of years a more functional style to writing JavaScript has become popular. If your not used to functional programming then it can be a bit of a steep learning curve to start with, but start by leaning about a library called Ramda.
Here are few links to get you started on functional JS
An introduction to functional programming in JavaScript
Thinking in Ramda
Indentation is the enemy: Writing less complex JavaScript
Mostly Adéquate guide to functional programming
When it comes to testing, then Jest combined with Enzyme is by far the best current option.
Finally for a much deeper answer, checkout this talk from Cheng Lou on the Spectrum of Abstraction.

Most of the answers are proposing stuff like jQuery, React, Angular, Vue.js... which are not frameworks, neither architectures. All of these libraries are layers on top of JavaScript. I just remind you that JavaScript is already a high level language!
Since the question is about a good client-side architecture and structure for large scale web applications, I would say that none of the previous answer solve the problem, and there is a reason for that :
There is currently no emerging or commonly accepted architecture for front-end JavaScript source code organization.
I already read dozen of blog posts, Stackoverflow questions, Youtube videos... I never found someone who detailed a generic, general and scalable architecture. The main reasons are:
front-end JS code is quite small regarding back-end source code, most of the developers do not need a scalable architecture.
execution is ephemeral, lifetime of JS is the same as web pages lifetime.
the problem for many developers is more about manipulating the DOM than structuring large JS code. This is why people answers are about libraries rather than frameworks.
I really expect that some day, someone will propose the first real JS architecture (like MVC for example). But in my opinion, this architecture will be more about event-callback than MVC. Before concluding, I'll suggest you the following ressources:
Imperative or procedural programming.
Functionnal programming (probably the best lead with modules)
Awesome videos of Fun Fun Function
JavaScript modules
To conclude, I'll strongly recommend to consider JS modules that have a great underestimated potential. This is not exactly an architecture, but:
JS modules organise your code
JS modules are scalable
maintanability is easy
JS module are reusable
Previous list isn't the main reasons why you need to organize your code?
Word to the wise!

A lot of people push for either Dojo or YUI for large applications. They are honest frameworks where most everything else you'll find is a library.
Personally, I tend to stick with jQuery. I create jQuery plugins or jQueryUI Widgets as needed. I've managed to push jQueryUI pretty far.
Everything falls in either $.fn.myPlugin or $.ui.myWidget. To me, this has the added benefit of pushing you to keep code very modular and portable (assuming you abide by jQuery/jQueryUI conventions).
$(element).myWidget({
color:'eggplant',
someValue:42
});
$.upload(args);

I was actually struggling with the same question for sometime.. after doing few large-scale projects, I thought of sharing my learnings as a reference architecture incase someone else finds it useful.
Have a look at http://boilerplatejs.org. It is not a library, but a framework that integrates some industry leading libraries with architectural patterns for large scale javascript development.

According to my understanding on the frontend i will ask you to use web-components that uses only HTML,CSS and JS.
No need to spend much time on understanding the other languages. If you take the latest UI frameworks or libraries like Angular, React they have built on web components.
You can customize your own components and use cases which you want to use in your project.When you are using frameworks it will take some time to load and follow up for few libs that are using.
JS you can use it any way you want. You can re-use these components in any number of projects once you have created.
Just look into webcomponents https://www.webcomponents.org/introduction you will get a clear idea. I hope this helps.

With the experience of scaling some of my content for million viewers in my application. But then I had to close the application for less profit and more stress in managing it (not the cost though, but the profit was not high enough to keep up motivation)
My architecture was:
Mithril.js.org library - Checkout mithril here for front-end
Twitter bootstrap front-end framework
Backend with "Laravel and started migrating some of the heavy write data to nodejs"
Redis as in-memory storage.
I was almost in a situation to move my storage to s3 before I shut down the app.
No jQuery - I kept my app jQuery-free ( I heard and read somewhere big app avoid jQuery, so without further investigation myself, I planned to remain jQuery-free as well, though I have no solid or bullet proof reason to avoid jquery)
I found mithril more interesting then react or angular, it was so easy to start and I was building while I was learning, it was damn easy and they claim, they are better than react, vue and angular in terms of size and performance.

My response would be to ask why you need this? I've worked on plenty of applications which make use of javascript, but one thing that I've learnt is that the best thing to do is to minimise javascript and most especially object orientated javascript to an absolute minimum. Web pages with large and complicated javascript tend to be slow, memory hungry and a pain to debug with all the browser variations.