Tips for creating a unified user interface framework for various web applications sharing a consistent design

Struggling to create a user interface framework for multiple web applications, I'm faced with the challenge of setting up the infrastructure in our unique situation:

  • We have 7 (or more) different web applications built using asp.net mvc
  • Some of these applications are hosted on internal servers while others are hosted externally
  • All applications share basic CSS/images/javascript components
  • Each application also has its own set of unique CSS and javascript elements
  • Every application is housed in its own TFS branch and solution
  • Each application follows its own release management schedule (monthly, yearly, etc.)

My objectives are:

  • To fix UI bugs once, rather than having to do it for each individual application
  • To maintain consistency in the UI across all applications
  • To avoid involving other developers in UI related tasks

What would be an effective infrastructure strategy to achieve these goals?

javascriptasp.netcssframeworkscdn

Answer №1

From my own experience, the challenge of sharing non-compiled code across web projects often boils down to source control issues. While we use an internal NuGet server for compiled code, it doesn't work as effectively for non-compiled code like HTML, scripts, and content. I've found that organizing common framework components into a single hierarchy stored as an independent project or submodule in our chosen source control system works best.

/myframework/scripts
/myframework/styles
/myframework/images

If you manage "myframework" as a submodule, you can update it separately from the projects it's used in. This is simple with git and svn.

For application-specific scripts and content, you can maintain them in your preferred hierarchy, such as:

/scripts
/styles
/images

It's also helpful to explore how popular front-end frameworks organize their default configurations. For example, Zurb Foundation structures its scripts, styles, and content templates under folders Content and Javascripts by default. They recommend not modifying their style sheet, but rather creating a separate stylesheet for custom styles to avoid conflicts with the shared framework. Adopting a similar approach for your internal framework is a wise choice.

Answer №2

In order to streamline the distribution of css, js, and images across various projects, we opted to utilize NuGet. Our global UI team manages a separate project specifically for the global UI, where we have automated the creation of NuGet packages that are then deployed to our internal NuGet server.

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 seem to be facing some difficulty in dynamically calling my buttons in AngularJS

Can you assist me in solving this problem? I am new to Angular and just starting out. Initially, there is only one button on load called "Add list". When the user clicks on this button, they are able to add multiple lists. Each list contains a button labe ...

javascriptjqueryangularjs

What is the best way to display or hide an image loader in a row when a button is clicked using jquery?

I am facing an issue with a grid view and update panel where I have set up an image loader to display when the post back occurs. However, whenever I click on a button in row 5, all the loaders show up at once instead of just the one near the button clicked ...

c#jqueryasp.net

What could be causing my slider to malfunction?

No errors are being returned by the console. Currently utilizing Unslider. The setup includes: <div class="slider"> <ul> <li><img src="img/one.jpg" alt=""></li> <li><img src="img/one.jpg" ...

jqueryhtmlcssunslider

"CodeSandbox encountered an issue where PostCSS received an undefined value instead of the expected CSS

I successfully uploaded a React project to CodeSandbox locally by utilizing the codesandbox ./ terminal command. If you want to access the CodeSandbox project, you can find the link here. However, when trying to view the project in the pane, I encountere ...

cssreactjscodesandbox

Bootstrap carousel powered by AngularJS

Struggling to incorporate bootstrap, angular, and a carousel to showcase images from local folders on my drive. Unsure how to customize the angular file properly. The example provided in the link below fetches images from the Internet, but I need to modify ...

cssangularjstwitter-bootstrap

Guide on utilizing async/await in .ts files (Encountering error message: "async functions can only be used when targeting ECMAScript 6 or above")

Initially, my project consisted of only app.js using ExpressJS as the main file with numerous lines of code. My development manager instructed me to refactor the code and move some functions into a separate .ts file (transition from JavaScript to TypeScrip ...

javascriptnode.jstypescriptexpresses6-promise

Starting service upon startup in Angularjs

I am looking to retrieve configuration data from the server and store it in the global scope within my AngularJS application. My app operates in multiple modes such as development and production, with different external services being used depending on the ...

javascriptangularjs

When I click the login button, a .ttf file is being downloaded to my computer

I have encountered an issue with my web application where custom font files in .ttf, .eot, and .otf formats are being downloaded to users' local machines when they try to log in as newly registered users. Despite attempting various solutions, I have b ...

javascriptjquerycss

Implementing Title Attribute in Grid View Template Field

I have implemented a Grid View with a "TemplateField" that includes properties for Header Text and SortExpression set to true. Upon inspecting the browser, I noticed that it generates an anchor element with some JavaScript. How can I add a title tag to t ...

javascript.netc#-3.0

JavaScript - Retrieve a nested property within an object using an array of strings

I possess an object in the following format { metadata: { correlationId: 'b24e9f21-6977-4553-abc7-416f8ed2da2d',   createdDateTime: '2021-06-15T16:46:24.247Z' } } and I possess an array containing the properties I wish to re ...

javascriptnode.js

Using PHP to extract information from a JSON file

After researching various articles and tutorials, I've managed to piece together the code below. However, as a beginner in PHP, JSON, and Javascript, I am seeking guidance. The task at hand is to update a div with the ID "playerName" every 10 seconds ...

javascriptphpjsonajax

Unable to retrieve information from compact JSON files

It's been 2 hours and I still can't figure this out I need help with reading my Json Data in my JavaScript File, saving it to a variable, and then printing it out. I've tried multiple solutions but nothing seems to work (I'm new to ...

javascriptjson

One-way communication between two clients using Socket.io

While working on a basic socket.io application using React and Express, I've encountered an issue where two clients are facing difficulties in sending data to each other. For instance: Player 1 connects to the server followed by Player 2. Player 1 ...

javascriptnode.jsreactjsexpresssocket.io

Leveraging server.ts for Development with Angular 5 Universal

I decided to give the new Angular Universal Starter a try for my latest Angular 5 project. Instead of providing multiple options, they now only offer the Angular CLI version as a starting point. I've been able to successfully run my project in product ...

javascriptnode.jsangularexpressangular-universal

The node.js and express.js update operation (CRUD) is not rendering the CSS files properly

I am currently developing a CRUD app using Node.js/Express.js with EJS as the templating engine. The concept I'm working on involves displaying user_ids from a database, and when an admin clicks on a user_id, it should redirect them to the edit_team. ...

cssnode.jsexpressejs

The API call for /api/users/create was resolved without a response, which could potentially lead to requests getting stuck. This issue was detected in

I've developed an API endpoint to manage user account creation within my Next.js application, utilizing knex.js for handling queries. Despite this, I keep encountering the following error: API resolved without sending a response for /api/users/create ...

javascriptnode.jsapinext.jsknex.js

The expected React component's generic type was 0 arguments, however, it received 1 argument

type TCommonField = { label?: string, dataKey?: string, required?: boolean, loading?: boolean, placeholder?: string, getListOptionsPromissoryCallback?: unknown, listingPromissoryOptions?: unknown, renderOption?: unknown, getOptionLabelFor ...

javascriptreactjstypescript

Struggling with transferring information from JavaScript to PHP through the use of Ajax

Currently, I am working on creating a string using a JavaScript function and then passing it to PHP. This is the block of code in my JavaScript file: <script> function passVal(){ var strUrl = buildStringUrl(lat1, lng1, lat2, ...

javascriptphpajax

Tips on successfully passing multiple keys and their associated HTML tag attributes in a React application

One of my links, specified with an a-tag, appears in this manner: <a href={ item.htmlReportUrl } target="_blank" rel="noopener noreferrer"> {item.htmlReportText}</a> The values for the href and the linktext are sourced from the following: ro ...

javascriptreactjs

Create data structures in python, php, c#, go, c++, and java using a JavaScript/JSON object

I am looking for a way to reverse the output of the JSON.stringify function specifically for node.js. My goal is to generate code snippets for various programming languages by converting JavaScript structures into their native counterparts in python, PHP, ...

javascriptnpmdata-structures