Working with Scala PlayFramework and Angular JS can be overwhelming due to the amount of duplication and confusion that arises from mixing different concepts

Attempting to build an application using the combination of playframework, scala, and Angular JS, I aimed to create a web app that functioned seamlessly whether JavaScript was enabled or disabled in the browser. This requirement is common when developing a public site that needs to be user-friendly as well as search engine optimized for Google indexing.

The end result was roughly 50% of the code written in JavaScript, with separate folders named "controller" - one housing Scala code, and the other containing JS code (due to AngularJS utilizing the controller concept). Additionally, a new scala-controller had to be implemented to handle json responses instead of html, solely for the JS code's Ajax calls. This process felt overly complex and labor-intensive.

In terms of the playframework templates, combining Scala with JavaScript presented challenges in passing parameters between the two languages. Various tricks were employed to manage this interaction depending on whether JS was active or inactive. However, these workarounds made the template less intuitive and scalable; potentially leading to duplicated templates for different scenarios.

As the volume of JS code increased, approaching 60% of the total, the idea of maintaining dual applications—one for users and another tailored for Google—seemed inevitable. While data duplication could be avoided by referencing the same database entities, discrepancies in data formatting (likely json-based) may arise. Furthermore, considering utilizing NoSQL databases like MongoDB for their compatibility with JS-native operations.

This raises the question: why not leverage JS for handling basic functions such as request-response, page composition, and layouts entirely? By having a server-side JS controller generate templates, the need to switch between languages could be eliminated, boosting productivity and efficiency.

Question: Are there any recommended practices or suggestions to streamline this setup? While steering clear of consolidating all functionalities under NodeJS for both server and client-side scripting, it's crucial to prioritize productivity and business requirements.

For reference, here is an example showcasing the extent of JS code required for AngularJS controllers: https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/angularjs/js

Consider the complexity of managing PlayFramework controllers alongside this for HTML and AJAX interactions, highlighting the intricate mix of Scala/playframework templates with JavaScript elements.

javascriptajaxscalaangularjsplayframework-2.0

Answer №1

Here is the plan to structure your project using the eventual seed (https://github.com/angyjoe/eventual):

  1. Start by crafting your HTML and feel free to incorporate different JavaScript frameworks and libraries, although AngularJS is recommended for this seed.

  2. Determine the Play models that will guide your controllers.

  3. Identify the essential operations for each controller such as list, create, show(id), update(id), delete(id). Implement these functionalities as Scala actions.

  4. Create a Play route to connect each implemented action with the client framework.

  5. Add a single Play route to deliver your styled HTML content to the client framework.

  6. Allocate the rest of your development time and resources towards enhancing the client-side experience...

Answer №2

Using Angular may be overwhelming for your specific situation. Consider sticking with a simpler solution like jQuery for the JavaScript aspect, and utilize Rest endpoints as play routes to provide JSON data to your webpage.

Answer №3

Check out this interesting article on the combination of AngularJS and Play Framework.

Answer №4

Currently, I am exploring potential solutions that could be of help:

https://github.com/nau/jscala

or perhaps this one: https://github.com/lampepfl/scala-js

However, it's important to note that these are not definitive answers.

UPDATE:

For Scala developers who wish to avoid diving too deeply into JS, the best option may be to wait for advancements in tools like JScala or Scala-JS that can seamlessly replace CoffeScript within Play2. Until then, we have to make do with existing options.

Here is an example: https://github.com/typesafehub/angular-seed-play

This Play app does not have a app / view directory, and the "routes" file is nearly empty because Angular handles aspects on the client side. Thus, they are not necessary at this stage.

This follows a Rich Internet Application (RIA) approach. In the future, if there is a need to make the app searchable by Google, then incorporating view & routes would be essential.

UPDATE 2:

While working on a PlayFramework project, I discovered that using simple request-response methods along with minimal JQuery or JScala can be effective.

The key point here is that the popularity and resource demands of your app are uncertain. Handling performance issues may require moving certain functionalities to the client side or employing multiple Akka Actors on the server side. It is crucial to prioritize development productivity, which was the primary goal behind building PlayFramework. This allows for quick feedback on changes made to templates/html. Amidst the hype surrounding AngualrJS, it's easy to overlook this fundamental aspect.

Whether loading 200k of json file alone or 200k + 5k html from the server side makes a significant difference depends on the nature of the site/app. For platforms like stackoverflow and many others, it may not be critical. Development efficiency outweighs such considerations.

Remember: "Follow the bright point and carry on (C)" :)

UPDATE 3: (evolution based on real needs)

My current app comprises two modules:

  1. "web" - a nodejs app featuring angularjs on the client side
  2. "server" - a play application without views or server-side templates. However, running IntelliJ IDEA with Scala & SBT plugin significantly strains my laptop's resources unnecessarily. Until quantum computers become a reality, this issue remains unresolved.

At present, I only require basic rest functionality. Therefore, I might opt for a NODE JS server (for tasks involving MongoDB) alongside a Play 1.3 server (java)! When necessary, I can integrate scala logic/libs with Java API components. The focus will remain on creating a REST layer, without overcomplicating matters. While traditionally a Java enthusiast, I find the java and scala world overly convoluted.

Hence, starting off with html, css, node, and js seems prudent. Later, when required, emphasize type-safety in logic implementation.

UPDATE 4:

Exploring interesting avenues:

  1. https://github.com/greencatsoft/scalajs-angular
  2. https://github.com/greencatsoft/scalajs-angular-todomvc
  3. related question: Scala-JS for real web project

Answer №5

Just finished a project that demonstrates how to build an AngularJS/Play application using Scala.js:

Check it out here!

There may be some rough spots, but I think the ability to code everything (even the AngularJS components) in Scala will be attractive to certain individuals.

Answer №6

Check out this fantastic project showcasing the integration of AngularJS, MongoDB, and Scala with an informative tutorial. This example demonstrates how to create a cutting-edge web application using a client-side JavaScript App developed in AngularJS written in CoffeeScript, hosted on the Play Framework, and utilizing Reactive Mongo for document persistence - a non-blocking Scala client for MongoDB:

Explore the project on GitHub

Learn more about the modern web template

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting VueJS, Electron, and Webpack integration with Hot Reload feature

I have been immersed in a new project that involves utilizing Electron, VueJS, and Webpack for HMR functionality. Unfortunately, I am encountering difficulties with the Hot Module Replacement feature not working as expected. Here is my current configurati ...

javascriptwebpackvue.jselectronwebpack-hmr

Is it better to use a page with a Repeater or make an AJAX call to generate a dynamic

As I transition from traditional ASP.NET programming to AJAX/jQuery, I find myself working with a web form that utilizes a Repeater server control to display data in an HTML table. I perform sorting, coloring, and other client-side actions on the table. I ...

jqueryasp.netajax

Assigning a default value to a date picker within a dynamically created form after making an AJAX call

Hey there, I've been delving into AngularJS lately. Currently, I'm working on a POST AJAX call that retrieves data which I use to create a form. Within this form, there are two input fields that serve as date pickers. I've been struggling t ...

jqueryangularjsdatepicker

Struggling with the setup of Ajax Push Engine(APE) on my Virtual Box has been quite challenging

Looking for any helpful Windows users who have experienced similar issues and can offer guidance on setting up the APE. Thank you! ...

ajaxpushape

Using a constructor function in a for loop

Currently, I am learning how to build a Blackjack game with Javascript on Codecademy. I'm struggling to figure out what code to write inside the for-loop. The task at hand is to create a "score" method within the Hand constructor. This method should ...

javascriptarraysfunctionfor-loopmethods

eliminate the firebase firestore query using onSnapshot

Seeking assistance with the following code snippet: firebase.firestore() .collection("chatrooms") .doc(`${chatId}`) .collection(`${chatId}`) .orderBy("timestamp") .limit(50).onSnapshot((snapshot) => { //performing oper ...

javascriptfirebasereact-nativegoogle-cloud-firestore

Is it possible to modify the appearance or behavior of a button in a React application based on its current state?

I'm looking to customize the color of a button based on different states. For example, if the state is active, the button should appear in red; otherwise it should be blue. Can anyone suggest how this can be achieved in React? Furthermore, I would als ...

javascriptreactjsfrontend

Employing promises for retrieving ajax data

I've been struggling to make sure my code waits for an ajax call to finish before proceeding, as I need data in an array first. No matter what I try, it seems like promises might be the best solution in this scenario. Currently, the ajax call still oc ...

javascriptjqueryajax

Encountered an error with ng build --prod while attempting to import a JavaScript file within the app module

Is it possible to import a javascript file into my app module without access to the ts file? import { OtherComponent } from './node_modules/blahblah/OtherComponent.js' While trying to declare this component in @NgModule and running "ng build -- ...

javascriptangularangular6aotng-build

How to toggle the display of a div by its id using index in Javascript

Currently, I am encountering a problem with toggling the div containers. When I click on the video button, I want the other divs to close if they are already open. However, due to the toggling mechanism, if a div is closed and I click on the corresponding ...

javascripthtmlangular

What is the best way to increase a specific value in an array of objects once it has been located (using findOne()), but before it is

I'm looking for a more efficient way to update an object within an array of schemas in one database request instead of two. Currently, I use findOneAndUpdate() to increment the field if the object already exists, and then I have to use update() if the ...

javascriptnode.jsmongodbmongoosenosql

Is there a way to direct Webpack in a Next.JS application to resolve a particular dependency from an external directory?

Is it possible to make all react imports in the given directory structure resolve to react-b? |__node_modules | |__react-a | |__app-a | |__component-a | |__next-app | |__react-b | |__component-b // component-a import { useEffect } from ' ...

javascriptreactjswebpacknext.js

The system encountered an issue: "Property 'add' is not defined and cannot be read."

I'm facing a dilemma with my exercise. Despite the numerous inquiries regarding this problem, I haven't been able to find a solution. I am hopeful that you can provide some assistance! Below is the code snippet in question: let myDivs = docume ...

javascriptarraysclassrandomsetinterval

The selected value is not being displayed correctly when the data is retrieved from the server

One interesting feature I have is a dropdown list:- <label>User Names:</label> <select ng-options="c as c.User for c in userList" ng-model="selectedUser" id="search3"> </select> An API populates the data in this dropdown. Here ...

angularjs

Resolving Typescript custom path problem: module missing

While working on my TypeScript project with Express.js, I decided to customize the paths in my express tsconfig.json file. I followed this setup: https://i.stack.imgur.com/zhRpk.png Next, I proceeded to import my files using absolute custom paths without ...

javascripttypescriptexpress

Create a dynamic form using JSON data and the Material UI library

Looking for assistance in creating a dynamic form on Next.js by parsing JSON files and generating the required components from the JSON data. Additionally, seeking guidance on utilizing the Material UI library for styling. Any examples or help would be g ...

javascriptreactjsreact-nativematerial-uinext.js

The addition of days is producing an incorrect result

When extracting the date from FullCalendar and attempting to edit it, I noticed that moment.js seems to overwrite all previously saved dates. Here is an example of what's happening: var date_start = $calendar.fullCalendar('getView').start.t ...

javascriptfullcalendarmomentjs

Using the spread operator in combination with the reduce function in JavaScript

I am attempting to generate all possible paths of the provided JSON object. I have managed to generate the paths, but I would like the final array to be flattened without any nested arrays inside it. I tried spreading the array, but there are still some ne ...

javascriptjsonspread

Rearrange the items in an array that contain different data types

After spending some time searching on SO, I did find some helpful information but I am still struggling to achieve the desired solution. My current issue involves a keypad with numbers 1 through 5. When a number key is selected, it gets added to an array n ...

javascriptarraysreactjs

Accordion with searchable tabular layout

Can you search for a product within an accordion? I have 34 categories in my accordion, each with a table containing at least 10 rows. Each row has a column with an icon that stores the data of that row. Please note that I am not using jQuery tables. If ...

javascriptjqueryhtml