Transitioning from Backbone to AngularJS - What challenges can be expected?

Currently I am deep into a large Backbone project (around 8000 lines of JavaScript, not counting external libraries) and I am contemplating making the switch to AngularJS.

At the moment, a significant portion of my code deals with DOM manipulation, event binding and unbinding. I rely on Mustache for template rendering. Most of the data is fetched via AJAX, stored in Backbone models, some of which utilize BackboneRelational. Additionally, I have integrated about 10 small jQuery plugins for enhancing the user interface.

While I am set on moving forward with this migration, I do have concerns about meeting my deadlines. So, here are some questions:

  1. How much time would it take to rewrite everything using AngularJS? Is there anyone who can share their experience with me?
  2. Is it feasible to start incorporating Angular into the project now for new features, without causing complications when it comes to interacting with the existing Backbone components?
  3. If I decide to refactor after the deadline, what best practices would you suggest to prepare the code for an easier migration process?
javascriptbackbone.jsangularjsrefactoring

Answer №1

When I first started with Angular, I took on the challenge of porting over a sizable 5k+ lines of BB code. Surprisingly, I was able to complete this port in just five days - tackling it over a weekend and then dedicating three additional days to finalize everything. The fact that I had originally written the entire BB application myself definitely made the process smoother.

If you're considering mixing BB and Angular in your project, my advice would be to focus on porting the complete app to Angular first, rather than taking a piecemeal approach. Although it may seem daunting, transferring Backbone Models and Collections into services should be straightforward, along with converting html and Mustache templates. The trickier part may involve dealing with jQuery plugins, but simple ones can often be integrated using angular-ui's jQuery passthrough feature found at http://angular-ui.github.io/.

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

When initially compiling Angular 5, an error (TS2339) may occur, but after a successful compilation, everything runs smoothly

In a unique scenario, I wrote code that fetches information from an API server without knowing the structure of the response fields. Once I receive the response, I need to create a form for updating the data and sending it back. To handle unknown ngModel p ...

javascriptangulartypescriptangular5

Number entered isn't visible in Bootstrap modal window

Can anyone help me troubleshoot why the value "APno" is not appearing next to "Appointment Number" in a Bootstrap modal despite the modal showing up? This is my code: Form <form method="POST> Appointment Number:<br> <input type="n ...

javascripthtmlbootstrap-modal

What could be causing the malfunction in one of the functions within my JavaScript code?

As a JavaScript beginner, I am currently working on creating a To-do App with JavaScript. Most of the functions are functioning perfectly except for one called doneTask at line 36. Despite numerous attempts to identify the issue, I have been unsuccessful s ...

javascripthtmlcss

Is there a way for me to loop through the URLs stored in an array and showcase them individually in an iframe?

This code snippet aims to iterate through a list of URLs and display the latest one in an iframe. It also incorporates jQuery's countdown plugin for additional functionality. <?php $count=0; $urls[]="http://www.techcrunch.com"; $urls[]="http://www ...

phpjavascriptjqueryiframe

Updating the content of a window without the need to refresh the page using JavaScript

Is there a way to navigate back to the previous window in chat_user without refreshing the entire page when the back button is clicked? Below is the code I have tried: <a href="" onclick="window.history.go(-1); return false;">back</a> ...

javascriptjqueryhtmlcss

Making a page jump with Javascript

Welcome! Let's dive into our question. Below you'll find my script and HTML code: My Script: const resultEl = document.querySelector('.allquotes'); const pageSize = document.querySelector('select[name="page-size"]') ...

javascripthtmlpagination

Implement event listeners to transcluded content in AngularJS

How can I add event handlers to transclusion content in a directive without allowing consumers to add their own click handlers? I want the directive to handle it, but I'm unsure of the correct approach for adding handlers to the content passed with ng ...

javascripthtmlangularjsangularjs-directiveangularjs-ng-transclude

The AJAX response containing jQuery is failing to produce any visible changes

On Page 1 of my website, there is a form that, upon submission, loads Page 2 using jQuery. This process involves calling a PHP page and displaying the output on Page 1 without actually reloading the entire page. To maintain security, I have set up session ...

javascriptjqueryajax

Initiating a GET request to retrieve the file generated by the server

I am currently delving into the Mean stack and have encountered a challenge with downloading a file from my server-side application using the Angular front end. Despite successfully generating the file on the back end, clicking the download button on the f ...

javascriptnode.jsangularexpressmean-stack

unable to access various attributes in an angular directive

I have a particular HTML setup that effectively outlines each attribute's value through a distinct "attachment" directive. These values are located in the attrs list of said directive, which is within a modal file upload form. <p>For Testing Pu ...

javascripthtmlangularjs

Selenium fails to detect elements that are easily located by the browser using the aba elements, as well as through the use of JavaScript in the console

Looking to automate actions on the bet365 casino platform, but facing challenges with bot blocking mechanisms. Visit: Struggling to interact with elements within the "app-container" div using Selenium, however able to access them via JavaScript in the br ...

javascriptpythonseleniumautomation

Make sure to allow the async task to complete before beginning with Angular JS

As I develop an app using MobileFirst v8 and Ionic v1.3.1, I encounter issues with timing in my code execution. Specifically, when the application initiates, the regular ionic angular code within my app.js file runs. This section of the code handles the i ...

javascriptangularjsionic-frameworkibm-mobilefirst

Find the location in a node.js script where a promise was rejected

Recently, I encountered a code snippet from an npm package that has been causing me some trouble. The issue is that I'm having difficulty in pinpointing where the rejected promise is being created or rejected within node.js. const someHiddenEvil = fu ...

javascriptnode.js

Uncovering the Origins of Angular Console Errors

Note: This inquiry will be updated to remove outdated question with lower rating. Encountering AngularJS console errors like: Lexer Error: Unexpected next character at columns 0-0 [#] in expression [#]. https://i.sstatic.net/lWzxv.png The challenge now ...

angularjsconsole

Adding a regional iteration of a library that was unable to be loaded

Recently, I have been experimenting with PhantomJS to capture screenshots of a webpage every five minutes. While the process runs smoothly most of the time, I encountered an issue where the AngularJS library fails to load intermittently. This results in th ...

javascriptangularjsphantomjs

Enhancing material appearance by incorporating color gradient through the extension of three.js Material class using the onBeforeCompile method

In my three.js scene, I have successfully loaded an .obj file using THREE.OBJLoader. Now, I am looking to add a linear color gradient along the z-axis to this object while keeping the MeshStandardMaterial shaders intact. Below is an example of a 2-color l ...

javascriptthree.jsgeometryvertex-shader

Preventing Past Dates from Being Selected in JQuery Date Picker

Need help with a date picker that only allows selection of the 1st and 15th dates of each month. How can I prevent users from selecting previous dates? <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" ty ...

javascriptjqueryhtmljquery-ui-datepicker

Guide to setting up MEAN stack on Cent OS

Hi there, I am a beginner in the world of software development and currently, I am exploring MEAN Stack. However, I am facing difficulties installing it on Cent OS 7. My system specifications are as follows: 1. i7 Processor 2. 12 GB RAM 3. 512 GB Hard Di ...

angularjsnode.jslinuxcentos

Express.js continues to retrieve outdated query results that have already been removed from the database

I am experiencing a strange issue with my PostgreSQL and Express.js setup. Despite updating my database with new entries and deleting old ones, it seems to only display the old data that was deleted days ago. It's almost as if it's stuck in some ...

javascriptnode.jspostgresqlexpress

form for submitting multiple data via Ajax

I am working with two forms (request and feedback) where I need to use jQuery Ajax to send the data. When a user submits a request, the subject line will display "Request". If they submit feedback, the subject line will display "Feedback". Here is my cur ...

javascriptjqueryajax