Code Abstraction: Navigating Communication Confusions through Function Definitions


When working on a development team, a customer might request two different features: one to list artists and their paintings and another to list classical musicians and their albums on different pages. In a project using Express or Laravel, defined routes collect data and return HTML views populated with data based on the URL for the page. In conventional web servers like Apache or Nginx, scripting languages like PHP are used to collect data and return HTML views to the user. Regardless of the server environment, data must be queried from a database or other source, formatted to fit the reusable defined data structure, interpolated into the HTML view, and sent to the users’ browser to display on the page.


By carefully planning reusable data structures, developers introduce defined organizational structures to large undefined data sets to boost productivity and increase communication. Data can come from many sources. Different sources can name content in different ways. The level of abstraction necessary to have the maximum level of reusable code requires breaking the problem down into levels. The data would be an array of objects containing either musician names and albums or artists and their paintings. 


// Musicians

[

  {

    author: “Coheed and Cambria”

    creation: “Second Stage Turbine Blade”

  },

  {

    author: “Dashboard Confessional”

    creation: “Swiss Army Knife”

  },

]


// Painters


[

  {

    author: “Leonardo Da Vinci”

    creation: “Starry Night”

  },

  {

    author: “Leonardo DaVinci”

    creation: “Mona Lisa”

  },

]


The data structure entering the template is an array of objects. Objects contain the artist or musician and the painting or album. To encourage reusability, objects could be abstracted to primary and secondary titles. Acceptable examples include name and work, primary and secondary, or author and creation. 


A function that returns a template could be the result of multiple template pieces combined together. The reusable template could be stored in a function called twoColumnTemplate. The functions that return the template could be named according to component structure, such as header, footer, or home page. Templates could be managed by file system structures, database systems, or by combining template literals in the application. The function could also be named getTemplate in systems using dynamic template generation logic. Regardless of the system used, templates return the HTML view with the two-column HTML structure populated with the data from the service layer to render the column to the page. 


// The two-column template can be passed musician data or painter data to use reusable logic to render separate data sets to the page using the same template organizational structure. This allows different data sets to be presented to the user in an identical format across pages.


<TemplateComponent template={twoColumnTemplate} data={musicianData} />


Or


<TemplateComponent template={twoColumnTemplate} data={painterData} />


To render the content to the page, the service layer looks at the page URL and determines which set of data to render inside the template. These two pieces of reusable code work together regardless of the specifics of the content as long as the data structure of the content remains the same. 


If you are not using a template, one option a developer could implement is a reusable component architecture using ReactJS. In this case, separations of concerns would be abstracted into components: one for music and one for paintings. Two functions would query the data from different parent components: getMusicians and getPainters. After a parent component receives the data, the data would be passed to the template rendering child component. This method is similar, but it generates using a different organizational pattern.


Complex code organizes logic in a variety of ways. Different web technologies operate on different paradigms. The programming logic and function names should reflect the programming language, libraries, and organizational best practices scoped to a scenario with all relevant information necessary for a developer to make proper decisions. 


Reference


Codeacademy. (2024). Difference between class and object, and function and method. https://www.codecademy.com/forum_questions/52fb74757c82cace17000145#:~:text=An%20object%20is%20a%20collection,community%20of%20functionality%20an%20object.

Comments

Post a Comment

Popular posts from this blog

SalonAboutBeauty: Less Integration for Consistent Styling Across Components

Ensuring Consistent Variables Less provides several advantages for organizing CSS to ensure consistency across a website. The variables.less file defines reusable properties that allow a developer to easily communicate and maintain styles according to a style guide or theme.  The Less Web Development Cookbook describes properties in the variables.less file in relation to other programming languages: “Variables in Less are defined as the equivalent to statics in other programming languages. You assign a value to a variable once and use it everywhere in your code” (Meyghani & Jobsen, 2015, p. 50). It suggests that less allows a developer to set properties, such as colors and length, to variable names that retain their meaning and can be used everywhere in the code. Examples: @base-color: red, @primary: green.  By providing these definitions in a central location, developers create code consistency in all areas of the website. Creating an Organized File St...
Read more

Why “Human Error” Is Usually a System Design Problem

In complex systems, failure rarely comes from a single bad decision. It comes from problems that evolve slowly, cross boundaries, and remain unresolved while everyone involved behaves reasonably. Managing risk in these environments means managing trajectories, not just incidents. When ownership is divided strictly by role, function, or severity threshold, gaps are inevitable. Those gaps are where issues linger, age, and quietly accumulate risk, not because they were ignored, but because no one was responsible for carrying them forward end to end. This is common in healthcare, where delay is often necessary. A patient may require observation, referrals, or time to clarify diagnosis. The failure is not that care takes time; it is that the trajectory of care becomes fragmented. Each clinician escalates correctly within scope, yet no one owns the evolving picture across visits, domains, and decisions. The patient is evaluated repeatedly, reassured locally, and sent away without continuity ...
Read more

Challenges in Prosecuting Deep Web and Darknet Crimes: The Case of Ross Ulbricht and the Silk Road

  The deep web represents online information that is not easily accessible through search engines. Prosecuting crimes on the deep web is no more challenging than prosecuting crimes for any standard website because law enforcement can still track the user's location through a domain or IP address. Alternately, the darknet poses a challenge for law enforcement to address illicit activity because while the darknet is a web-based system, it is accessible only through the Tor protocol that encapsulates HTTP and HTTPS traffic, much like a VPN that hides a user’s location and identity. The Tor protocol, often called the Onion Router, contains methods for encrypting and routing traffic between peers. The purpose of the Tor protocol is to make web browsing anonymous by routing each request through multiple peers and altering encryption at various steps until the request reaches its destination. Subsequent requests may hop through different peers, making traffic appear random, unpredictable,...
Read more