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

I am encountering a problem with IE11 where I am unable to enter any text into my

When using Firefox, I can input text in the fields without any issues in the following code. However, this is not the case when using IE11. <li class="gridster-form" aria-labeledby="Gridster Layout Form" alt="Tile Display Input column Input Row ...

Having difficulty with sending an AJAX GET request to connect to mongodb

I've been facing a challenging task of displaying data from a mongodb collection on the browser using nodejs and express. Here's the client-side call: document.onload= $(function (e) { var i = 0; $.ajax({ type: "GET", url: "http://localh ...

Error Message: ElectronJS - Attempted to access the 'join' property of an undefined variable

I am currently working on developing a tray-based application. However, I am encountering an error that reads: Uncaught TypeError: Cannot read property 'join' of undefined Can anyone guide me on how to resolve this issue? This is the content ...

Proper utilization of ngIf in conjunction with mat-cell

I am attempting to show a specific value only if the item possesses a certain property, but I keep seeing [object Object] instead. Here is my current method: <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDe ...

Having trouble with a beginner problem that's hindering the functionality of my code

I have been struggling with a particular piece of code and it is driving me crazy as I am unable to locate the source of my error: $.post($form.attr('action'), $form.serialize(), function (result) { console.log(result); if (result.succes ...

What is the best way to clear a MongoDB objectId field, set it to null, or ultimately remove it from a

Custom Modal Schema : { "title":{type:String,required:true}, "genre":{type:mongoose.Schema.Types.ObjectId,ref:"Genre"} } Upon creating a document using this schema, the document structure appears as follows: { "_id":ObjectId("5abcde12345fgh6789ijk ...

What is the method for retrieving the currently selected value in a MultiColumnComboBox within Kendo for Angular?

Check out this live example created by the official Telerik team: I need to extract the id (referenced in contacts.ts) of the currently selected employee when clicking on them. How can I access this information to use in another function? ...

The pairing of RequireJS and Toaster

I am facing an issue with integrating Toaster into my demoApp that utilizes RequireJS. Below is the code snippet: (function () { require.config({ paths: { 'angular': 'bower_components/angular/angular', ...

tips for personalizing your jQuery image preview script

Currently, I have implemented a jQuery script that allows me to preview multiple images before uploading them. Although the functionality works well, I am facing difficulties customizing it to meet my specific requirements. <script> $(document).r ...

The EJS file is failing to display the stylesheet even though it is being pulled from the

Encountering a strange issue where the page routed to display additional information about a specific record from my database list on the homepage is not loading the stylesheets located in my partial/head, despite successfully passing the object informatio ...

Responsive Bar Chart using jQuery Mobile and ChartJS that appears on the screen only after resizing

I have been experimenting with adding a responsive bar chart using Chart.js in one of my JQM projects. Here is what I have accomplished so far: http://jsfiddle.net/mauriciorcruz/1pajh3zb/3/ The Chart needs to be displayed on Page Two and it should be res ...

Is there a possibility of Typescript expressions `A` existing where the concept of truthiness is not the same as when applying `!!A`?

When working with JavaScript, it is important to note that almost all expressions have a "truthiness" value. This means that if you use an expression in a statement that expects a boolean, it will be evaluated as a boolean equivalent. For example: let a = ...

Utilizing JavaScript Callbacks in HTML Image Tags

Currently I am working on a small application and looking to include a YouTube section. I have come across a method for obtaining the user's YouTube icon: This is included in the head section of my code: <script type="text/javascript" src="http:/ ...

How can I transfer variables between controllers using a service in AngularJS?

I am trying to pass a variable between controllers using a service. Below is the implementation of the service that passes the variable (in this case, a song id): 'use strict'; angular.module('PortalApp') .service('ActionbarSer ...

Determine the position of an element in relation to a specific ancestor using JavaScript

Let's consider the following example of HTML code: <div id="site_header_container" class="site_bar_container"> <div id="site_header"> <div id="header_logo_container"> <a class="sliced" id="header_ ...

Refreshing a Vue JS component

As a beginner in VueJs, I am facing an issue with reloading a component and table when a refresh button is clicked. I have tried using the forceUpdate method and changing keys, but it has not been successful so far. If anyone has any suggestions on how to ...

Ways to show dynamic text according to slider adjustments

I am struggling with adding an if condition to my form that includes a horizontal slider. My goal is to display text based on the position of the slider. Can someone offer some guidance on this, please? Here's my HTML code snippet: <form method=" ...

A guide to displaying a PDF preview using React Dropzone

I am struggling to find a way to display previews of PDF files that I'm uploading using react-dropzone. Although PNG and JPG files are working correctly, I would like to be able to show the user either the actual PDF or an image representation of it. ...

Exploring the capabilities of nested forEach loops in Angular

Consider the following two arrays: var array1 = [{'target_object_id': 1, 'extra': 'ok'}, {'target_object_id': 2, 'extra': 'ok'}] var array2 = [{'id': 4}, {'id': 2}] The obje ...

'The controller as' syntax function is failing to trigger

I have encountered an issue while converting my controller from '$scope syntax' to 'controller as' syntax. Suddenly, my function has stopped firing and I am unable to pinpoint the cause of this problem. One example is the clearCheck() ...