Which framework should be used: client-side or server-side?

I am working on a project similar to craiglist, where users can post announcements for everyday items like cars and flats. I have already developed a significant portion of the backend using a RESTful API in three-tier architecture with Java, connecting to the database and providing URLs that return JSON.

For example, when I call , I receive back:

{"user": {"username": "jdoe1234", "email", "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="701a141f154142434430171d11191c5e131f1d">[email protected]</a>"}}

All actions on the site are managed through these URLs, carefully designated as POST, GET, UPDATE, DELETE, etc. There is also oAuth protection for the API to prevent unauthorized queries.

While the server-side aspect is solid, I am considering whether a client framework like Angular or Ember would be beneficial for making HTTP requests, handling responses, and populating HTML views. However, I am uncertain about the best choice between AngularJS and Ember, especially considering the release of Angular v2 and concerns about maintainability.

I am cautious about using a client-side framework due to potential limitations and security risks, as the code is fully instantiated in the browser and accessible to users. Therefore, I want to ensure that any technology I use is reliable and secure, especially if the application reaches a broader audience.

In summary, with the existing webservice and API infrastructure, I am unsure whether implementing a client framework like Angular is the right decision compared to relying on traditional server-side frameworks like Symfony or Zend, given the anticipated high usage volume (similar to craiglist).

Answer №1

If you're deciding between being a frontend or backend developer in the future, your choice of frameworks may vary. Full stack developers won't be constrained by this decision.

In my view, dynamic frontend JavaScript frameworks like Ember/Angular/React are more exciting than traditional server-side frameworks such as Symfony/Zend.

If you already have RESTful API and OAuth authentication set up on the backend, Ember could be a great choice. Ember Data simplifies communication with the backend API, offering customization options and lazy loading of records when needed.

The framework is fully instantiated in the browser, allowing users to modify all code and data provided...

Ember prioritizes security measures such as data sanitization in its HTMLBars templating language. Additionally, Ember implements CORS and content security policy (CSP) standards for added protection.

I want to ensure the technology used for my application, especially if it will be available to the public. I aim for proper implementation to prevent maintenance or security issues.

With Ember, you can develop mature, secure applications ready for production. However, building complex web applications requires a strong grasp of Ember skills.

Considering my existing webservice/API setup, would using a client framework like Angular be beneficial?

Absolutely! Using MEAN stack or pairing Ember with a RESTful API is a popular choice.

Why choose Ember over Angular, which has a larger community/resources?

Although Angular boasts a bigger community, starting a project with it revealed varying opinions within the community on best practices. Ember's Convention over Configuration principle and Ember Data's utilization of JSON API standard provide a more streamlined development experience without the need to navigate through multiple solutions.

Ember's CLI tool and JSON API adoption simplify development and eliminate confusion surrounding different approaches to common tasks.

What defines a "Single page application" ?

A single-page application doesn't require full asset and HTML reloads when navigating, unlike traditional PHP pages. Users only download new data for each route, enhancing user experience.

Can these frameworks support custom routes? (www.myapp/profile/userid etc)

Absolutely! With simple rewrite rules and logic for specific routes like 'profile/:userid', you can create meaningful URLs without any additional characters. This allows for seamless navigation based on specified parameters.

Answer №2

In the world of development, it often comes down to this: Client prioritizes speed, while Server emphasizes stability.

JavaScript frameworks seem to require updates on a weekly basis, whereas non-JavaScript back-end systems may only need to be updated once a year.

The behavior of the client side is heavily influenced by different browsers, while backend operations are more reliant on specific machines rather than overall environment factors.

My choice to focus on front-end development came from my frustration with debugging code by manually writing variable values into databases just to understand what was happening in the controllers -_-

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

Is there a way to retrieve the data selected in my modal window when a button is clicked, depending on the v-for value?

As someone who is new to Vue and utilizing Bootstrap modals to showcase product information, I have grid containers that contain a product image, description, and two buttons. One of the buttons, labeled More details >>, is intended to trigger a moda ...

Extract TypeScript classes and interfaces from a consolidated file

I am seeking a way to consolidate the export of my classes, interfaces, and enums from multiple files into a single file. In JavaScript, I achieved this using the following method: module.exports = { Something = require("./src/something").default, ...

What is the process for tallying checked checkboxes in a functional component using React Native?

The Whole Code is Right Here Within this code, you will find two flat lists: one displaying category names and the other showing their subcategories with checkboxes. I am looking to implement a feature where if a user checks multiple or just one checkbox ...

Execute with jQuery using Multiple Attribute Selector

I am attempting to input numeric values using a keyboard. My issue is as follows: the keyboard has an "Accept" button, and I have multiple text fields. I want to assign a different action for each text field. I attempted to use multiple attribute selector ...

Slide containing Ionic list views

In my Ionic app, I am using ion-slide-box with 3 slides. Each slide contains an ion-list (table view) with varying numbers of items. The issue is that when scrolling through the shorter list items, it shows empty content due to the taller sibling list taki ...

Developing a personalized camera feature using ReactJS

After searching for a suitable npm library to create a custom camera component within my ReactJS project, I came across an article providing detailed information at this link. However, I am facing challenges in converting the existing pure JavaScript code ...

Tips on implementing a Javascript function triggered by a user's click within the video player frame

<script> function greet() { alert("hello"); } </script> <iframe width="100%" height="315" src="https://www.youtube.com/embed/AGM0ibP1MRc" onclick="greet()"></iframe> .Kindly assist me, please. ...

Encountered an error while trying to create a new NestJS project using yarn: Command execution failure - yarn install --

Having trouble installing a new NestJs project using yarn. Operating system : Microsoft Windows [version 10.0.19044.3086] Node version : 18.17.1 npm version : 9.6.7 yarn version : 1.22.19 Nest cli version : 10.1.16 I attempted to install by running : npm ...

Vue 2 draggable does not maintain reactivity when the v-model value consists of a parent tag's iterable

Utilizing Vue 2 alongside Vuex, the incoming object gets organized into distinct sub-objects according to the classCategory value. Could it be failing because the v-model value in draggable is a key sourced from the parent tag object? <div class="c ...

Using jQuery to reference my custom attribute---"How to Use jQuery to reference My

Can you explain how to reference a tag using a custom attribute in jQuery? For example, if I have a tag like this: <a user="kasun" href="#" id="id1">Show More...</a> I want to reference the tag without using the id. So instead of using: $( ...

Developing an object that displays animated effects when modifying its properties, such as visibility, and more

Exploring the realm of animations in JavaScript and AngularJS has led me to the idea of creating a unique JavaScript object. Imagine having the ability to define an object where setting an attribute like obj.visible = true Would automatically make the ...

HTML list with clickable elements for querying the database and displaying the results in a <div> element

Patience please; I am a newcomer to StackOverflow and this is my inaugural question. Struggling with writing an effective algorithm, I wonder if my attempts to "push" it forward are causing me to complicate what should be a straightforward concept, or if i ...

Issue with fullPage.js - Unable to scroll to footer on the last section of the page

I'm currently working with the fullPage.js plugin () and encountering some issues. While sliding through each section, everything functions as expected. However, when I reach the last section and try to scroll down to the footer below it, I encounter ...

Utilizing PostgreSQL with Node JS Express for Powerful Datatables

Seeking guidance as a newbie here. I've taken on the challenge of creating my first full-stack app. My goal is to connect my express app and PostgreSQL database with Datatables. The API successfully fetches the data and logs it in the console, but the ...

Tips for attaching a callback to Angular UI Popover's trigger

I recently implemented an Angular UI Popover in the following manner: <div popover-is-open="prfList.isProfileClosed===false" popover-trigger="'outsideClick'" popover-append-to-body="true" popover-placement="right-top" popover-class="popover1 ...

Switching the loading order of jQuery and AngularJS to load jQuery after AngularJS

If you want angular.element to reference jQuery instead of jQLite, make sure to load jQuery before Angular in the page head. On mobile devices, performance is key. It would be great if jQuery could be loaded after AngularJS for better overall performance, ...

Creating a JavaScript/jQuery array containing values from multiple input fields

Having trouble figuring out a simple question. I want to create a JavaScript array of input values, but can't seem to get the code right. Below is the HTML: <input class="email" value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

AngularJS Input field fails to update due to a setTimeout function within the controller

I am currently working on a project that involves AngularJS. I need to show a live clock in a read-only input field, which is two-way bound with data-ng-model. To create this running clock effect, I am using a JavaScript scheduler with setTimeout to trigge ...

Ensuring Proper Tabulator Width Adjustment Across All Browser Zoom Levels

<div id="wormGearTabulatorTable" style="max-height: 100%; max-width: 100%; position: relative;" class="tabulator" role="grid" tabulator-layout="fitDataTable"><div class="tabulator-header" role="rowgroup"><div class="tabulator-header-co ...

Is there a way to modify the FixedTableHeader jQuery plugin to include a fixed first column in addition to the fixed header?

I've been experimenting with a jQuery plugin I found at to create a stylish table with fixed headers, sorting options, and other interesting features. While the plugin is great, I also considered using jqGrid for its impressive capabilities. However, ...