How I Define Good Application Architecture

In the ever-evolving field of software engineering, defining the attributes of good application architecture can be as subjective as it is technical. Throughout my career, I have encountered various metrics and standards used to measure the quality of software architecture. However, I believe that the most effective and perhaps the simplest test of good architecture is this: it takes fewer lines of code to create new functionality than one initially expects.

This principle might appear overly simplistic at first glance, but its implications are profound. Good architecture, in my view, inherently possesses qualities like modularity, reusability, and scalability. These features, when effectively implemented, lead to a system where adding or modifying features becomes a task less daunting than one might anticipate.

Modularity: The Cornerstone of Efficient Architecture

At the heart of this approach is modularity. A well-architected application is divided into discrete components or modules, each responsible for a specific piece of functionality. This separation of concerns not only makes the codebase more manageable but also allows for easier addition of new features. When the architecture is modular, new functionality often requires just a few lines of code to integrate a new module or to enhance an existing one.

Reusability: Doing More with Less

Reusability is another key aspect. Good architecture promotes the development of reusable components. When you can reuse existing components to create new functionality, the amount of new code required decreases significantly. This not only saves development time but also maintains consistency across the application, leading to fewer bugs and maintenance issues.

Scalability: Preparing for the Future

Scalability is integral to good architecture. An application that is scalable is designed with future growth in mind. It means that when the time comes to expand the application’s capabilities or to enhance its performance, this can be done with minimal changes to the codebase. A scalable architecture anticipates future needs, thus reducing the need for extensive rewrites or adjustments when those needs arise.

The Litmus Test of Fewer Lines of Code

Now, why do I consider “fewer lines of code for new functionality” as the litmus test for good architecture? It’s because this principle encapsulates the essence of modularity, reusability, and scalability. If adding a feature to your application requires an inordinate amount of new code, it might be a sign that the architecture isn’t as modular, reusable, or scalable as it could be. Conversely, if you find yourself pleasantly surprised at how little code is needed for new features, it’s likely a testament to the solid architecture of your application.

Final Thoughts

In conclusion, while there are many ways to assess the quality of software architecture, I find that the most telling is how efficiently new functionality can be added. A good architecture should feel like a well-oiled machine, where each part plays its role seamlessly, and improvements can be made without the need for extensive overhauls. This approach not only makes the development process more efficient but also results in software that is robust, adaptable, and future-proof.

How Non-Developers Can Keep Developers Engaged and Productive

In today’s fast-paced technology landscape, effective collaboration between developers and non-developing team members is more crucial than ever. A harmonious working relationship not only boosts productivity but also ensures that projects align closely with their intended goals. Central to this collaboration is the understanding that developers, like all professionals, seek appreciation for their work and clear communication about their deliverables.

Understanding Developer Needs

  1. Appreciation of Work: A developer’s motivation and job satisfaction are significantly enhanced when their efforts are recognized and valued. Regular acknowledgment of a developer’s hard work in meetings or through written commendations can go a long way. This recognition fosters a sense of belonging and purpose, driving developers to continue delivering high-quality work.
  2. Clarity on Deliverables: Developers thrive when they have a clear understanding of what they are building and why. Non-developers should strive to provide comprehensive briefs that explain not only the technical requirements but also the broader context and objectives of the project. This clarity helps developers feel more connected to the project and can lead to more innovative and aligned solutions.

Actions for Non-Developer Partners

  1. Detailed Discussions on Requirements: It’s crucial for non-developers to engage in in-depth discussions with their developer counterparts. These discussions should aim to clarify the project needs, the reasoning behind them, and the expected outcomes. Regular check-ins and brainstorming sessions can help refine these objectives, ensuring that both parties are on the same page.
  2. Timely Feedback: Once developers release new updates or versions, it’s imperative for non-developers to acknowledge this progress and provide feedback as soon as possible. This feedback should be constructive, focusing on both the strengths and areas for improvement. Timely responses not only show that the work is valued but also guide developers in the right direction for future updates.

A Personal Story: The Impact of Feedback Delay

My personal experience highlights the importance of these practices. In a recent project, I delivered a version of the code to the non-developer team and eagerly awaited their feedback. However, it took them six weeks to respond. This delay led me to conclude that they were not interested in the work, which was disheartening. Feeling undervalued, I eventually pulled out of the project. This experience underscores how delayed feedback and poor communication can significantly dampen a developer’s enthusiasm and commitment to a project.

Conclusion

The relationship between developers and non-developers doesn’t have to be fraught with misunderstandings. By showing appreciation for developers’ work and providing timely, detailed feedback, non-developers can foster a more productive and positive working environment. Such practices not only enhance project outcomes but also build a foundation of respect and collaboration, crucial for any successful team.

As technology continues to evolve, the ability to work effectively across different roles will become increasingly important. By adopting these simple yet impactful practices, we can ensure that our teams are not just functional, but also thriving.

When to Use Components vs. Writing Code

In the ever-evolving world of software development, the choice between using pre-built components and crafting your code from scratch is a common dilemma. Thanks to the Node Package Manager (NPM), we have a treasure trove of libraries and components at our disposal. However, the question remains: when should you employ a component, and when should you roll up your sleeves and write your own code? Let’s explore this decision-making process to help you find the right balance for your projects.

The DIY Approach: Writing Your Own Code

Writing code from scratch can be a rewarding endeavor. It gives you complete control over your application’s logic and behavior. Here are some scenarios where opting for a custom solution might be your best bet:

1. Simplicity and Control

If you understand the full scope of the code required and it’s relatively simple to implement, it often makes sense to write it yourself. This approach can minimize the final amount of code used in your application. By crafting your code, you have complete control and can tailor it to your specific needs without the baggage of unnecessary features.

2. Customization

When your project demands a high level of customization that may not be readily available in existing libraries, writing your code becomes a compelling choice. Tailoring your solution ensures that it fits seamlessly into your application’s architecture.

3. Learning and Skill Development

Writing code from scratch offers a valuable learning experience. It allows you to delve deep into the mechanics of programming and helps improve your problem-solving skills. If you’re aiming to enhance your development skills, writing your code can be an excellent exercise.


Leveraging Libraries: When to Use Components

When considering whether to use pre-built components and libraries, it’s essential to recognize that many of these tools are developed and maintained by specialists in the field. These experts have honed their skills in tackling complex tasks and have poured their knowledge into creating these libraries. Here’s why you should consider relying on these expertly crafted resources:

1. Expertise and Specialization

Libraries and components are often developed by experienced developers who specialize in specific domains. For example, when it comes to data fetching and management in a React application, the React-Query library is an excellent choice. The developers behind React-Query have spent countless hours fine-tuning it to handle complex scenarios, such as caching, pagination, and background data synchronization. By using React-Query, you benefit from the expertise of these specialists and can tap into their solutions for common challenges.

2. Maintenance and Updates

One of the significant advantages of relying on established libraries is the ongoing maintenance and updates provided by the open-source community. Libraries like React-Query receive regular updates, bug fixes, and security patches. This means that your application can stay current with the latest best practices and security standards without requiring constant manual intervention.

3. Community Support

Popular libraries often have vibrant communities of developers who contribute to forums, provide documentation, and share their experiences. This wealth of community support can be invaluable when you encounter issues or need guidance. You’re not alone in troubleshooting problems or implementing complex features – the collective knowledge of the community is there to assist you.

4. Time Efficiency

Leveraging libraries can significantly accelerate your development process. Instead of investing considerable time and effort in building complex functionalities from scratch, you can integrate a well-established library into your project. This time efficiency can be a game-changer, especially when working on tight deadlines or large-scale applications.

5. Reducing Error Risk

Writing complex code from scratch increases the risk of errors and bugs. Specialized libraries, on the other hand, are thoroughly tested by both their creators and the community. This extensive testing helps identify and rectify issues, making it less likely for your application to encounter unexpected problems.

Conclusion

In the world of software development, the choice between using components and writing your code depends on the specific requirements of your project. The key is finding the right balance. If you can fully grasp the scope of your code and it aligns with your project’s simplicity and customization needs, writing your code can be a rewarding and efficient choice. However, when tackling more complex tasks or leveraging standardized functionality, leaning on libraries and components can save you time, reduce potential errors, and provide tested solutions.

In summary, when considering whether to use components and libraries, it’s important to recognize that these tools are not just pieces of code; they represent the collective knowledge and expertise of developers who specialize in solving complex problems. By embracing libraries like React-Query, you can harness the power of specialization, benefit from ongoing maintenance, tap into community support, save time, reduce error risk, and ultimately deliver more robust and efficient software solutions to your users. It’s a strategic choice that can elevate the quality and efficiency of your development projects.

Ultimately, your decision should consider factors like project complexity, time constraints, and your familiarity with the task at hand. The beauty of modern development is the wealth of options available. So, whether you’re writing your code or embracing pre-built components, remember that the goal is to create robust and efficient applications that meet your users’ needs.

AI Art

AI art refers to the creation of visual art using artificial intelligence algorithms. The use of AI algorithms in creating art has generated a lot of discussion and debate in the art world, with one of the critical questions being whether AI will replace artists.

When it comes to what makes art good, is it the technique used to create the artwork or the ability to lay out the scene, characters, and items in a pleasing way? Both of these elements are important in creating successful artwork, but there is a growing consensus that the composition of the work is what makes it truly good.

Artists have a unique ability to understand what makes a composition pleasing to the eye. They have a deep understanding of color theory, balance, and proportion. They can create compositions that evoke emotions and tell a story. In contrast, AI algorithms can create art that is technically sound, but it often lacks the emotional depth and narrative that artists can bring to their work.

I don’t beleive AI art will replace artists. While AI algorithms can be used to create visually stunning artwork, they lack the emotional depth and narrative that artists can bring to their work. Artists will always excel in knowing what makes a pleasing composition, and their skills and expertise cannot be replicated by machines.

So, AI art is an exciting development in the world of art (and AI), but it should not be seen as a replacement for artists. Artists will always play a crucial role in the creation of art that evokes emotions and tells a story. The unique abilities of artists will always be essential in creating truly great artwork.

AI is a Tool, like any other

Artificial Intelligence (AI) is becoming an increasingly important tool in the modern world of writing, changing the way articles are written and published. However, just like any other tool, its use is often the subject of debate. In this article, we’ll explore the role of AI as a tool in article writing, and why we don’t need to make a fuss about its use.


First, let’s consider the argument that people need to be aware of the limitations of AI and understand how it’s being used to influence their decisions. This is a valid concern, but it’s not unique to AI. The same argument could be made for any tool that’s used in article writing, such as Microsoft Word or the pen or pencil used to write the article.


When we write an article, for example, it’s not necessary to announce the make of pen or pencil used, or the software used to format the manuscript. The same applies to AI. If we’re using AI to help us write an article, it’s not necessary to make a big deal about it. The most important thing is the content of the article itself, not the tools used to create it.


Another argument is that AI is more powerful than other tools and therefore, it’s important to be aware of its limitations. While it’s true that AI is a powerful tool, it’s still just a tool. It’s not making decisions on its own, but instead, it’s being used by people to make decisions. The limitations of AI should be considered in the same way as the limitations of any other tool.


Finally, it’s worth noting that the use of AI can lead to increased efficiency and effectiveness in article writing. Just like any other tool, AI can be used to automate repetitive tasks, freeing up time for more valuable work. AI can also help us to analyze data and make better decisions, making our writing more accurate and effective.


AI is just another tool in the world of writing, and its use should not be cause for concern. The most important thing is how the tool is being used, not whether or not it’s AI.

ChatGPT by OpenAI

ChatGPT and GPT-3 by OpenAI,are trained AI models and can generate text on various topics, including answers to education homework. Through my observations, I have come to the conclusion that it’s time for us to rethink the way we approach AI in education.

Traditionally, the focus in education has been on teaching children how to perform specific tasks, such as writing an essay or solving a math problem. While these skills are important, they don’t necessarily prepare students for the future. In an era where AI is becoming increasingly prevalent, it’s crucial that we teach children how to think, not just what to do.

One of the main reasons for this shift is that AI has the potential to automate many of the tasks that students are currently taught to do. In the near future, machines may be able to write essays and solve math problems faster and more accurately than humans. This means that the skills that students are learning today may become obsolete in the future.

Instead of teaching students how to do specific tasks, we should be teaching them how to think critically and creatively. These are skills that are unlikely to be automated by AI and will become increasingly valuable as technology continues to advance. By teaching children how to think, we are preparing them for a future in which they can adapt and thrive, no matter what changes come their way.

In addition to being future-proof, teaching children how to think also has numerous other benefits. It helps them to develop problem-solving skills, encourages creativity and innovation, and promotes independent thinking. These are all skills that are essential in the modern world and will help students to succeed in any field they choose to pursue.

It is time we embrace the exciting potential of AI in education, it’s crucial that we rethink our approach. Instead of teaching children how to do specific tasks, we should be teaching them how to think. By doing so, we are preparing them for a future in which they can thrive and succeed, no matter what changes come their way.

(Yes, most of this post was written by AI)

A new Adventure

Time for my next adventure!

I will be leaving South Africa today to start full time employment with Imagine Learning in the United States. I will be working as a remote Software Engineer creating, maintaining and delivering educational software (I’ll be specializing in front end development with React).

As a remote employee I can work from anywhere and I plan to regularly come and visit South Africa and move between the different State in the USA to see as much as I can. Initially I will not be buying a car, instead I will be travelling by bicycle in each area I visit.

This trip will be to Phoenix Arizona (head office of Imaging Learning) where I will be meeting many of my team mates while we do a hackathon week. This trip will only be 6 weeks so that I can come home for Christmas. I am planning to go to Florida next (in January).

I will be posting pictures and notes on the Whatsapp group I previously used for my Tour Divide trip (if you would like to be on the group to see my adventures send me a private message and I will add you 🙂 )

Http 301

Interviews are sometimes very interesting as they can point out where you are missing some key information in what you know. In an interview last week I was asked how I would redirect a browser to a new URL.

I immediately suggested using a page with a redirect imbedded using JavaScript – I’ve done this a few times :). The interviewer then gave a hint of status codes…..

I know all about HTTP status codes (2?? = success, 3?? = redirect, 4?? client error, 5?? server side error). And I have used a number of the 200, 400 and 500 errors. So I knew that code 300s was for redirect but I had never actually used them to do so.

I spent some time over the weekend just working out how to do a redirect using 301 – Permanently moved – just because I had never done it before….

So here is how to do it in PHP

http_response_code(301);
header(“HTTP/1.1 301 Moved Permanently”);
header(“Location: “.$newurl);

Really Simple Svelte Routing

Routing is a key feature on any web page, routing is used to display content to the user based on selections the user makes, for example when selecting a menu option. There are many routing components available but sometimes a very simple routing option is needed and the routing components with all their features may be overkill.

This tutorial will show you a very simple way to add routing into a Svelte single page app. The functionality for the routing is all in one file. In this tutorial we will place it in the main page, but it could easily be extracted out of the main page into it’s own component.

Create Project

To start with lets create a simple Svelte project using one of the base templates. We will be changing all the content on the page but this is the easiest way to get a Svelte project started and running. 

Create Svelte project from a simple Svelte template

npx degit sveltejs/template svelte-spa-router

Install dependencies

npm i

Start the application

npm run dev

Page Layout

Our page layout is going to be a simple two column layout with the menu in the left hand column and the right hand column will be used to display the content for the menu option chosen. A CSS framework could be used for the columns, but for this tutorial we will stay with custom CSS classes instead of creating a dependency on a third part library.

In the App.svelte page add the following styles. Svelte allows styles to be applied per component.

<style

.row {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  width: 100%;

}




.column {

  display: flex;

  flex-direction: column;

  flex-basis: 100%;

  flex: 1;

}

</style>>

Now that we have the styles for a 2 column layout lets create the html for the page. Initially the 2 columns will just display simple headers, but we will replace these later as we build our routes.

Replace all the HTML 

<main

    <div class="row">

        <div class="column">

            <h1>Menu</h1>

        </div>

        <div class="column">

            <h1>Content</h1>

        </div>

    </div>

</main>>

If you are running the development server you should now see the two column display with the headers.

Create a Menu

Let us add a menu in the left hand column using anchor links, replace the text in the first column with our menu

<h1>Menu</h1

            <a href="#home">Home</a>

            <a href="#red">Red Page</a>

            <a href="#green">Green Page</a>>

This menu uses Location hashes to define the page to be display. When the user click s a menu option the page URL will update to include the hash value. We will then get the hash value from the URL, and based on the selected menu option we will display the relevant page

Get the menu selection

To get the menu selection we need to get the page from the current page.

<script

let page = document.location.hash;

</script>>

This will extract the page hash from the URL, but we also need to get the page whenever it changes such as when the user selects a menu option

window.onpopstate = function(event) {

        page = document.location.hash;

    };

Now the current location hash is in our page variable both when the user accesses our page with an existing hash value (such as from a bookmark) and when the user clicks one of the menu options.

Add the Routing

Based on the page variable we now want to change the content in the right hand pane based on the page that was selected. Replace the Content column contents with this script

{#if page==="#home"

    Home Page

{:else if page === "#red"}

    Red page

{:else if page === "#green"}

    Green page

{:else}

    404: Page not Found

{/if}}

In the else section we can choose to show whatever page we want to show. In the example above we show an error page, we could have easily shown the home page, maybe even passing a property through to indicate to the user that the request ed page does not exist

Now when you click on the menu options the content on the right will change to display the selected content. At the moment the content is just a simple text string but could be replaced by another component.

Creating the Red Page

To show that routing can be triggered from anywhere we can add a hash link on any page and the routing will still pick it up.

Create a new component called red.svelte. Add the following to the component

<div

    <h1>This is the Red page</h1>

    <a href=”#green”>Change to Green Page</a>

</div>




<style>

div {

    background: red;

    color: white;

}

</style>>

Now replace the “Red page” text in the main page with <Red /> (remember to import the red page into the file).

Now choosing red from the menu will diaply the red page content, and from the red page selecting the option to change t the green page will display the green page, as though the green menu option was selected.

Source code available on Github: ReallySimpleSvelteRouting