Front-end is the graphical user interface where users can interact with on their computers to communicate with the website’s database to view the information they need. To develop the front-end, developers use HTML, CSS, and JavaScript framework; and they also have to be aware of the constantly changing in the tools and techniques to create the front-end of a website.

HTML (HyperText Markup Language) is the most basic markup language (absolutely not a programming language), for documents designed to be displayed in a web browser. Learning HTML is the first step in front-end development. Come after HTML is CSS, stands for Cascading Style Sheet, and is used for formatting markup language, mostly for HTML. Finally, while HTML and CSS creates the structure of the website, JavaScript is what powers its interactivity. Furthermore, learning JavaScript is a never ending process since there are new frameworks coming every year. Let’s take a look at the popularity differences between these web frameworks, according to the Stack Overflow survey in 2019 and 2020 respectively:

We can see that jQuery is losing their numbers to React.js and Angular and React.js looks like they will get that first place this year, but the top three most popular frameworks are all JavaScript. Besides, as I said that there are new frameworks coming every year, it means that when a better framework shows up, front-end developers have to learn it in order not to be left behind. For now, in my opinion, React.js is what you should go for if you want to get a role in this field.

Besides the programming language skills, there are other tasks that front-end developers have to be aware of. From my experience, a method called fake API is really important. For instance, in the process of developing the graphical user interface, front-end developers have to test their work by calling the API from the back-end team to see how the data fit into their blocks. However, in case that back-end team falls behind or somehow is not able to provide the front-end team with the built API, fake API is one useful method to test the front-end. Another frustrating task that I’ve heard about is that the design has to be responsive which means that the website has to run properly on any device, from the smallest mobile device to the largest desktop.

In conclusion, above is what I know so far about the front-end. Also, I found outstanding guidance about the practice of front-end development from Frontend Masters including almost everything we’ll need regarding a front-end topic. Check it out if you want to learn something in the front-end.

From the blog CS@Worcester – Vien's Blog by Vien Hua and used with permission of the author. All other rights reserved by the author.

This week I decided to dive more into APIs in general, not just RESTFUL APIs. So let us start at the beginning. API stands for Application Programming Interface, and it is an interface with a set(s) of functions. These functions allow programmers to use specific features or data of an application. A web API is an API that is accessed over the web, like through the HTTP protocol. The web API is a framework that assists in creating and developing HTTP based services.

An API usually works as follows, the client application initiates an API call, usually to retrieve information. This call is also known as a request. This request is then processed from the application to a web server using the API’s Uniform Resource Identifier, and usually has a request verb, like GET or POST, for example, headers, and a request body. After receiving a valid request from the application, the API makes a call to the web server. The server then responds to the API with the requested information, and the API then transfers the data to the initial requesting application.

APIs are often used for many reasons. This includes, but is not limited to, improving collaboration, offering easier innovation, data monetization (as money makes the world go round), and added security. APIs enable integration such that platforms and other applications can easily communicate with each other, allowing easier automation, therefore improving collaboration. They also offer flexibility, allowing connections to new businesses and reaching new markets, offering easier innovation. APIs are also often offered for free, usually initially, to allow the developers audience to grow so they can build relationships with their audience of developers around their brand for the future, securing future business partners, thus offering data monetization. Lastly, APIs create an added layer of security between your data and a server. Developers can also choose to add further security measures like tokens, signatures, and Transport Layer Security encryption, just to name a few.

There are also many types of APIs, some of which include, but are not limited to, SOAP, or Simple Object Access Protocol, XML-RPC, which is a protocol that relies on XML to transfer data, JSON-RPC, which uses JSON instead of XML for its work, and REST, which we have covered in prior weeks blog posts.

Source:

IBM

I decided to use the above source for this weeks blog post because they provided a ton of good information about APIs in general, and IBM is also a very well known company and therefore also a good reputable information source.

From the blog CS@Worcester – Erockwood Blog by erockwood and used with permission of the author. All other rights reserved by the author.

I have worked before with Docker and Docker Compose, but I am a bit shaky when it comes to networking either of them. I know it is possible, and I know it is often a necessary step in deploying applications. However, I have never had luck trying to network containers together. I wanted to spend some time learning more about this.

Docker comes with several networking drivers: bridge, host, overlay, ipvlan, and macvlan. Bridge is the default networking driver used by Docker and is the most popular. Ranvir Singh’s article “Docker Compose Bridge Networking” outlines how to use that bridge networking driver to network containers together using either Docker or Docker Compose.

A network for Docker containers can be created using the following command:

$ docker network create -d bridge my-network

This creates a network called ‘my-network’ which uses the bridge driver. To add containers to this network, one would run commands similar to the following:

$ docker run -dit --name container1 --network my-network ubuntu:latest
$ docker run -dit --name container2 --network my-network ubuntu:latest

These commands would create ubuntu containers ‘container1’ and ‘container2’ respectively and would add them to the ‘my-network’ network. Singh advises that a network should be dedicated to a single application; this ensures that applications are secure and isolated from one another.

Networking with the bridge driver works slightly differently when using Docker Compose. By default, Docker Compose will create a network with the bridge driver and will deploy the services defined in the Compose file to that network. This network is named after the directory that the docker-compose.yml file is in. This setup does not require ports to be exposed in order for containers to talk to one another; one should be able to call the hostname to reach another container. Calling ‘docker-compose down’ removes and deletes the network created from the docker-compose.yml file.

Instead of using the default Docker Compose network, a network can be defined inside the docker-compose.yml file. This definition happens at the top level of the compose file, similar to how a service is defined. This way multiple networks can be defined and used by a single compose file.

I selected this source because it was something I was interested in. I thought networking was exclusive to Docker Compose, and I was not aware that you could create a network for Docker images to communicate over. This does not help my problem of not being able to get Docker Compose services to talk to each other, but it does help to clarify some information I had been missing. I will internalize the information in this article for future work, but I also want to keep looking into this topic.

Additional Source

From the blog CS@Worcester – Ciampa's Computer Science Blog by robiciampa and used with permission of the author. All other rights reserved by the author.

Christian Shadis

Over the past month, my Software Construction, Architecture, and Design course has shifted gears into a sort of crash-course for full-stack web development. Our initial focus was on the backend of web apps and specifically on APIs. In class I learned how to edit API endpoints for different HTTP methods such as GET, POST, and PUT. I understood how to code the API and I understood the difference between the different HTTP methods, but I still did not understand the very basics of what an API was beyond its acronym. For this blog post, I set out to learn the fundamental nature of APIs to supplement my technical understanding. While it is helpful to know how to code an API, the knowledge would likely be useless without an understanding of what an API is or when to use one.

An API (Application Programming Interface) is a technology developed as a solution for multiple applications needing to communicate despite their incompatibility. For example, a person running Google Chrome trying to view the available items on a store website requires their web browser and the store’s server to be able to communicate. This is unlikely to be possible without an API. The API allows Chrome to send a request for information to the server, and then allows the server to return the requested data (or an error message) in a particular format such as JSON. The API facilitated the exchange of information between a client application and an unrelated server. This example illustrates the necessity of APIs. Without them, communication among devices built differently would be impossible. Web browsing as we know it would not exist, nor would web-based phone applications.

In What is An API and How Does It Work?, Thomas Davis first describes the omnipresence of APIs in everyday life even for non-programmers, and contrasts that ubiquity with the fact that few people understand how an API works, let alone what it does. He describes the API as an intermediary between two parties that do not speak each other’s language, and provides everyday examples of situations in which one would desire two computers to communicate. Once he explained the base concept of an API, he described different types of APIs such as the REST API, the SOAP API, and the XML-RPC API, comparing and contrasting each.

Knowing how to code APIs is an important aspect of backend development, but I feel much more confident in my ability to code an API now that I more fully understand the concept. I expect to build backends for web applications in the future, so this knowledge should be helpful in my development career.

References:

https://towardsdatascience.com/what-is-an-api-and-how-does-it-work-1dccd7a8219e

From the blog CS@Worcester – Christian Shadis' Blog by ctshadis and used with permission of the author. All other rights reserved by the author.

In the blog linked above by John Au-Yeung and Ryan Donovan, they look at “how to design REST APIs to be easy to understand for anyone consuming them, future-proof, and secure and fast since they serve data to clients that may be confidential.” The blog post starts off with an intro detailing how REST APIs are one of the most common kinds of web services today, describes a REST API’s function and addresses the problem of designing it right so the API consumer and API maintainer don’t run into any problems down the road.

The blog post is sectioned off into 7 different sections. These sections all address a good practice for designing a REST API as well as a block of code to set an example of what they mean. The 7 sections consist of Accept and respond with JSON, Use nouns instead of verbs in endpoint paths, Handle errors gracefully and return standard error codes, Allow filtering, sorting, and pagination, Maintain Good Security Practices, Cache data to improve performance, and Versioning our APIs.

To summarize the 7 sections,
Accept and respond with JSON: REST API should accept JSON for request payload and also send responses to JSON.

Use nouns instead of verbs in endpoint paths: Since verbs are already in the HTTP request, we should use nouns.

Handle errors gracefully and return standard error codes: Eliminates confusion for API users by handling errors neatly via HTTP response codes that indicate what error has occurred, this allows API maintainer to have enough info to understand problem that’s occurred.

Allow filtering, sorting, and pagination: Allowing these 3 features will increase performance by reducing usage of server resources.

Maintain Good Security Practices: Use SSL/Load a SSL certificate onto server and add role checks for users.

Cache data to improve performance: Add caching to return data from the local memory cache instead of querying the database, this would lead to getting data faster but data could be outdated.

Versioning our APIs: Version your API semantically like most apps do today.

From reading this blog post, I’ve learned more about the good practices for REST APIs. I was interested in learning more about REST APIs since it was the first time I was working them when we went over in class activity 12. Also, the blog post’s title mentioned REST API design which I thought was relevant to our class due to the class being aptly named Software Design and Architecture.

Admittedly, I didn’t learn the most helpful stuff from this article since I had learned most of it in class and by going over the in class activity with my group but I thought this blog post helps reinforce good practices if I do eventually work on REST APIs in my CS career. I’d also say that I looked into the article because of the making of endpoints for homework 4.

From the blog CS@Worcester – Brendan Lai by Brendan Lai and used with permission of the author. All other rights reserved by the author.

In addition to learning about design patterns that should be referenced when programming, I wanted to learn about bad software design, which led me to anti-patterns.

A wonderful source covering anti-patterns that I learned from can be found at: https://www.freecodecamp.org/news/antipatterns-to-avoid-in-code/.

Anti-patterns are bad software designs that show how not to solve problems in programming. The source covers 6 different anti-patterns: Spaghetti Code, Golden Hammer, Boat Anchor, Dead Code, Proliferation of Code, and the God Object.

Spaghetti Code is when there is barely any structure to the code. Files are thrown in random directories and it is difficult to follow the flow of the program. This would produce many issues when needing to modify the code, because the program can break and it would be difficult to tell what caused it. It would also be difficult to estimate what may break after you make a change.

Golden Hammer is when you repeatedly use an architectural approach in your code that does not exactly fit the program you are making. Despite the fact that it doesn’t exactly fit the program, it is still utilized because it gets the job done eventually. Problems arise from the fact that it does not fit the program, and can cause longer runtimes.

Boat Anchor is when programmers leave code in the codebase that has no purpose at the moment, and is kept incase it is needed in the future. This code acts as an anchor because it holds the program back– it increases build time, and can make code reading difficult when programmers have to discern between code used and the code saved for later.

Dead Code is when programmers cannot tell which parts of code are currently necessary for the program and which parts of code are no longer needed.

Proliferation of Code is when objects in your codebase only serve to create a more important object. This makes the code more difficult to follow.

God Objects are objects that have too many responsibilities. The code should be broken down more so that objects do not have to undergo functions that other, smaller bits of code can cover.

The Boat Anchor anti-pattern reminded me of YAGNI (“You aren’t gonna need it”). YAGNI is the principle that you should not add functionality to the program until it is actually needed. Adding the functionality in advance may end up messing with schedules and requirements may be changed in the future where that functionality is not even needed. The God Object anti-pattern reminded me of the single-responsibility principle (which the article briefly mentions). These anti-patterns will be very useful to apply to my code to prevent the program from being too complex and hard to follow.

From the blog CS@Worcester – CS With Sarah by Sarah T and used with permission of the author. All other rights reserved by the author.

DESIGN PATTERNS.

Design patterns provide a comprehensive solution that can be reused for common problems that arise in software design. A design pattern isn’t a complete design that can be transformed directly into code.

Types of Design Patterns:

• Creational Design Patterns
  Creational Patterns deal with object creation mechanisms, trying to create objects in a manner suitable to the situation. They reduce complexity and instability by creating objects in a controlled manner.

Types of CDP:

1. Abstract Factory

Creates families of related dependent objects.

• Builder

Constructs complex objects using step-by-step approach.

• Factory Method

 Creates an instance of several derived classes.

• Prototype,

 Creates a new object from an existing object.

• Singleton,

A class of which only a single instance can exist.

• Structural Design Pattern

These design patterns are concerned with arranging different classes and objects to create larger structures and provide new functionality. Structural class-creation patterns use inheritance to create interactions/interfaces.

Types of SDP:

1. Adapter

Allows for two incompatible classes to work together by wrapping an interface around one of the existing classes.

• Bridge

Separates the outline so that the two classes can differ on their own.

• Composite

Composite patternconsider a group of objects to be one.

• Decorator
  Allows for an object’s behavior to be extended dynamically at run time.
• Facade

Provides a simple interface to a more complex underlying object.

• Flyweight

Flyweight pattern takes the weight, or memory footprint, off of our objects by recycling them.

• Proxy

This pattern offers a proxy, or a substitute, to another complex object. Provides a space interface for the primary object to control access, reduce costs, or reduce complexity.

• Behavioral Design Patterns

Behavioral patterns are about identifying common patterns of communication between objects and identifying these patterns.

Types of BDP:

1. Chain of Responsibility.

Delegates commands to a chain of processing objects.

• Command.

Creates objects which encapsulate actions and parameters.

• Interpreter.

Implements a specific language.

• Iterator.

It accesses the elements of an object in sequence without revealing its basic representation.

• Mediator.

Allows for free integration between classes as it is the only class that has in-depth knowledge of their methods.

• Memento.

Provides the ability to restore an object to its previous state.

• Observer.

 Is a publish/subscription pattern that allows a number of observer objects to see an event.

• State.

Allows an object to change its behavior when its internal state changes.

• Strategy.

Allows one of a family of algorithms to be selected on-the-fly at run-time.

1. Template Method.

Defines the framework of the algorithm as an abstract class, allowing its sub-classes to deliver consistent behavior.

1. Visitor.

Separates an algorithm from an object structure by moving the hierarchy of methods to a single object.

REFERENCE

1. https://www.geeksforgeeks.org/design-patterns-set-1-introduction/
2. https://sourcemaking.com/design_patterns

From the blog CS@Worcester – THE SOLID by isaacstephencs and used with permission of the author. All other rights reserved by the author.

What is YAGNI?

YAGNI – You aren’t gonna need it is an Extreme Programming (XP) key practice that’s states: “Always implement things when you actually need them, never when you just foresee that you need them.”As it stated then programmer should not add functionality until it is proven to be absolutely necessary

YAGNI Principle always recommends programmers to build the easiest solution to today’s problems. Even if you are sure you will need the feature, moreover, do not run it now. Mostly, it’ll alter in either:

1. You won’t need it after all, or
2. What you really need is different from what you originally thought.

Why YAGNI Principle is mostly relevant in Software Development Lifecycle than others?

In Software Development when software developers start implementing features they always go into practices known as FEATURE CREEP. Software developers always try to add or improve features regardless of whether they are not requested by users. For example, developers may try to add authentication to the form without first completing CRUD in the database.

Alternatively, following YAGNI in the configuration life cycle enables developers to implement features that will only be relevant for the first duplicate or demo and other future features that will work as a new version or update of software developed as recommended by users.

YAGNI Principle is safe, if …

The YAGNI principle, alone, may not be secure. Software developers can set up an early algorithm on the system and then copy-paste it all over, so when it goes wrong they spend a lot of effort fixing it. With this process in coding, YAGNI is very dangerous and may not be the best idea.

But when the developers set the quality of the design, the quality of the code, and the quality of the test, YAGNI is completely safe, as every future risk is excluded by simple design rules, and it will be easy to find and fix if it goes wrong.

Benefits of YAGNI:

• With a simple answer you can say the biggest benefit of the YAGNI Principle is to avoid unnecessary development.

Main reasons to practice YAGNI

1. It saves time as you avoid writing code that may not make sense later.

2. Your current code is better because you avoid guessing which can be bad

For two main reasons for practice, they ensure:

• That deadlines are available quickly,

• Customer satisfaction due to visible and frequent changes according to their needs or details,

• The best quality of code ordered by the fact that developers focus on small tasks (those that are currently very important),

• The code can be extended more and more (allows for updated versions),

• Reduced number of adjustments required,

• That the error is easy to fix.

REFERENCE: – 

https://deviq.com/principles/yagni

From the blog CS@Worcester – THE SOLID by isaacstephencs and used with permission of the author. All other rights reserved by the author.