While attempting to brush up on knowledge on Frontend Web development presented to me in my Software Architecture class at WSU, I found a YouTube video [1] that contained a stack of free software tools and apps that fit closely with the class architecture.

Our class has shown usage of the following tools to give us a real-world cutting-edge view of what is being used by software engineers primarily geared towards enterprise-level web application development. They are all Open-Source and free to use for all.

1. Docker – A containerization model being used to run software components in virtualized containers. It is more efficient and easier to use than either virtualization environments like VMWare, VirtualBox, as well as Microsoft’s Hyper-V, which will be a contender in the future, but is “too much tool” for most current business needs.

2. Visual Studio Code – An integrated development environment (IDE), which is free, lightweight, surprisingly usable and extensible. Its limitations imposed by its general size are more than made up for by the vast amount of 3^rd party extension libraries that exist for it.

3. Operating Systems: Another huge advantage of this stack of products is that most if not all of them are available in some form on Windows 10/11, macOS, and many forms of Linux.

4. Design Tools: PlantUML – Fantastic in unison with Swagger Preview to produce useful design documents.

5. For Backend Development: Used by servers in association with databases to store and secure data.

• Node.js – The most commonly used open-source backend JavaScript Framework.
• MongoDB – A NOSQL database that uses JSON information embedded in non-relational data relationships.
• Express – A really handy JavaScript Framework Extension.
• Swagger Preview – A tool used to show JSON or YAML file formats in a mock UI format. It allowed us to test all of our JSON/REST database call from our back-end projects.  

6. For Frontend Development: Used to write websites (or mobile applications) to interact with users.

• Vue.js – A JavaScript framework used to build UI’s and SPA’s (Single Page Applications). IMHO, it is at least as useful as Express is on the backend.
• AXIOS: Integration of this package helps with controlling asynchronous HTTP requests to REST endpoints.
• JavaScript: Of course, but with the help of Vue and Axios, not much actual barebones JS was really needed.

7. Source Code and CI/CD:

• GIT – I have used git on a number of projects in the past and have had trouble with it at times because I had been used to more traditional non-distributed source control systems. The instruction in this class has shown me how amazing it really is, and it will remain my highest regarded VSC system.  
• GITLAB:  – I have used GitHub in the past and am now more of a fan of GitLab. 3 cheers for the sole developers. 3 cheers for Dmitriy Zaporozhets and Valery Sizov. It is a web-based DevOps lifecycle tool supporting GIT, issue-tracking, and a continuous integration and deployment chain.

A few helpful hints I picked up from the YouTube video are:

1. GUID Generator: UUIDV4 is a tool that can be downloaded using NPM (a Node Package Manager) which will generate Globally Unique ID’s for use with our application. [2]
2. POSTMAN – This is a great tool for testing your API’s [3]
3. JSON Formatter – Really useful when looking at complex JSON strings. It is usable in most modern browsers. [4]

As a final note, I think that although there are many other tools out there that could have been used to build the instructions for this class, and that software tends to live in an environment of competition from other companies, that this stack wins in my mind, because it is fully open source, completely cross-platform, and very leading-edge. Vue, as an example, would not have been pushed into the tool it is if it were not for competition from REACT and ANGULAR. Competition brings us all forward, but open source has the additional benefit of being altruistic.

References:

1. Building a REST API with NODE JS and Express

2. https://www.uuidgenerator.net/version4

3. https://www.postman.com/product/rest-client/

4. https://jsonformatter.org/

From the blog cs@worcester – (Twinstar Blogland) by Joe Barry and used with permission of the author. All other rights reserved by the author.

I have used JavaScript in the past, along with HTML and CSS, but was surprised to see the use of newer features I had seen in other languages like Java and C#.net being used heavily by JavaScript extensions like Vue.js. Some may consider these features to just be “syntactical sugar”, but once used, they tend to be really important in their ability to make your code more readable and useful.

I watch 2 YouTube videos on “The 5 Must-Use JavaScript” features, one by James Quick and one by PedroTech. This is my opinion of information I have consolidated from these tutorials.

1. Equality:

I have been used to seeing the “double equals” ‘—’ being used to differentiate between assignment statements (with a single =) and equality statements (with a double ==). This is pretty standard, but the use of a triple equals is new to me. As an example, if S1 is a string with the numbers “456”, then

(a). S2 = “456” assigns the value of S2 to “456”

(b). S2 == S1 compares “456” with “456” and returns TRUE

(c). S2 === 456 Compares String”456” with number 456 and returns FALSE.

This shows that (c) guarantees you are using the save values and object types (or primitives). (b) is useful because it works comparing both objects and primitive data types. Since the double equals seems to have been added to languages to differentiate between assignments and comparisons, the triple equals give a stricter control by guaranteeing value AND data type are identical.

2. Asynchronous JavaScript:

JS has been using callbacks since its inception. Over time it evolved into using Promises and Async Awaits.

GOOD – Callbacks: It’s older method where function pointers were passed to the callback function (like in C).

BETTER – Promises: This method uses error handling mimicking the try/catch/finally blocks used by most modern non-interpreted languages. E.g.

Set fetchData = new Promise();

fetchData.then(),catch().finally();

The logic for try goes in the then() method. If an exception occurs, the logic in the catch() block is called. In all cases, the finally() block is called for cleanup tasks.

BEST – Async Await:

This process is seemingly used more frequently, because it allows the developer to embed the logic for both the calling code and the receiving code to be implemented in the same method and is somewhat easier to use as a result.

3. Array Iteration:

Older method for iteration:

Let numbers = [1,2,3]

For (let i= 0; i < numbers.length; i++ {

 Console.log(numbers[i]);

}

Newer method:

Let numbers = [1,2,3]

Numbers.ForEach((element) => { console.log(element); }

This may seem like a minor difference, but, when understood properly, syntactical sugar like this can make your coding life simpler and less error prone.

From the blog cs@worcester – (Twinstar Blogland) by Joe Barry and used with permission of the author. All other rights reserved by the author.

During my career as a software engineer, design patterns were heavily used by some clients, and were not used at all by others. I was exposed to them early on by a developer at UNISYS while developing a Windows based control system for NTSB. At that time, there were class library extensions in the marketplace which were commonly used to enhance UI and database access development. We had the opportunity to code our own classes using their framework, as week as modify their code. In order to use their code in a proper way, you had to really understand it, which involved studying the extended class library code and documentation. While doing so, I became familiar with 4 design patterns they had heavily used. These were Singleton, Observer, Iterator and Builder patterns

My architecture class has shown me 3 new patterns I am very impress with. The memento, strategy, and the facade pattern. The class focused on the strategy pattern primarily, with some concentration on the Singleton. Memento and Façade patterns.

I will focus on the benefits of the strategy pattern for this blog entry because I found it to be eye opening. It is very powerful and useful, yet I hadn’t known of it specifically prior to the class. It turns out I had used this pattern many times without knowing it.

Many project I have worked on had objected oriented class libraries, where a solid grasp of OOP programming skills were necessary in the mid-to late 90’s and early aughts. Interface based technology grew into the class libraries and class library extensions, where interfaces became a really useful tool. There were times I coded directly from an interface (when trying to implement a specific API, or to a specification requiring a specific interface), and other time would purely use the Object hierarchy. There were times I had probably used the strategy pattern BY ACCIDENT! By knowingly combining interfaces and OOP with the use of the strategy pattern, a much better design can be constructed where you get the best use of both technologies.

I find the best way to concisely describe the power of this pattern is to quote from the “Better Programming” website [1]

Advantages of the Strategy pattern

1. It’s easy to switch between different algorithms (strategies) in run-time because you are using polymorphism in the interfaces.

2. Clean code results, because you avoid using conditional-infested code (not complex)

3. More clean code, because you separate the concerns into classes (a class to each strategy).

I wish I had had a clearer understanding of this pattern years ago. The example in the Homework using Duck classes was particularly easy to follow, and really showed the symbiosis of interface oriented and object-oriented methodologies in clear way, stressing the benefits of coding to separation of concerns in a well-structured project.

Design Patterns are broken up into Creational, Structural and Behavioral classifications as a way to direct the designer to the appropriate top-level category.

References:

1. http://www.betterprogramming.pub – Carlos Cabarello.

From the blog cs@worcester – (Twinstar Blogland) by Joe Barry and used with permission of the author. All other rights reserved by the author.

While in the process of trying to learn Docker as part of my Software Architecture class, I watched 5 YouTube videos. YouTube has been a real benefit to me for learning college level science courses. I have had good luck with Biology, Organic Chemistry, and even Statistics tutorials, but have not had much luck so far with Computer Science videos. There are some good ones out there, though, and “Docker Tutorial for Beginners – A full DevOps course on how to run applications in containers [1] is certainly one the best I have seen.

This 2-hour course by Mumshad Mannambeth covers all the bases in a clear and interesting manner and is enhanced with well thought out structure and graphics. The lectures are accompanied by direct access to a full-fledged Docker environment through labs [2] on a website

The course is broken up into sections exploring the definitions of containers, images, Docker itself, why you need it, and what you can do with it. He then goes on to explain the basic commands needed to create a docker image, how to build and run it in a container, the basic concepts of Docker Compose, YAML, and DockerFile.

He leaves the technical details of installing Docker Desktop for Windows and the MAC until later in the video, giving more time up front to clearly describe why you want to use it, what it accomplishes for the software development community, and how containerization is the future of enterprise level software. These installation sections are also well done but are not relevant for those who already have docker installed, or for those without the time to build their own environments. The tutorial and accompanying interactive quizzes on the right side of the site, are resources I will come back to in the future, because of their depth and clarity.

He then allocates about 40 minutes going into docker concepts and commands in depth and follows up with a history and description of the importance of continuous integration using container orchestration tools like Swarm and Kubernetes. He clearly lays out the architecture of a system that is complex, distributed, fault-tolerant, and easy to implement. He details the importance of DevOps, where the design, development, testing, and operations teams are seamlessly connected and have a symbiotic relationship. This makes everyone’s jobs easier, cuts down on departmental finger pointing when things go wrong, and brings product to market much quicker and with less bugs shipped.

He also covers the following areas:

1. Layered architecture

2. Docker registry

3. Controlling volumes

4. Port forwarding

5. Viewing logs

6. The advantages of container architectures over Virtual Machines and Hypervisors.

7. KubeCtrl

I was pleasantly surprised to have found this. Maybe I should give the computer science YouTube community more credit.

References:

[1]  YouTube link:

[2]  Tutorial links:

 www.freecodecamp.org

 www.kodecloud.com

Exhibits:

(1) Why do you need Docker?

(2) Container orchestration tools

(3) Layered architecture

(4) Hand-on Lab

From the blog cs@worcester – (Twinstar Blogland) by Joe Barry and used with permission of the author. All other rights reserved by the author.

VS Code’s best feature is its flexibility and extensibility with the use of its ability to encourage the development of 3^rd party extensions to tis functionality. I read documentation on these extensions and have watched a number of YouTube videos on other developer’s opinions and have come up with a list I think will be most useful for our architecture class students. Although I initially wanted to highlight these from the perspective of a Java develop, I have changed it to focus on the usefulness of the tool as it will most likely be used in our class, as reflected in the blog entry title.

I will start out with a short list of keyboard shortcuts that I think are essential to memorize. [1,2].

Although there are many extensions which will allow you to the use key-mapping from other editors, I found this troublesome when switching to the (Android Studio) IntelliJ shortcuts, because only the shortcut keys are changed, and not their corresponding menu items. Although I had worked with these key extensions to the point where they were second nature for a while, I switched back to using vscode native commands because of the lack of full integration. I have enclosed a map of these shortcuts at the bottom. These shortcuts are the generally the same between MACOS and Windows with the exception of Ctrl+ being used on Windows, and Cmd+ being used on the MAC. For the sake of clarity, I will use Ctrl+ here, and if you are using a MAC, please swap it with Cmd+”.

It is an important point to realize that for productivity, it is better to use the mouse as little as possible. These commands go a long way to making that happen.

Many more useful shortcuts exist and have multiple entries for different areas of focus in the UI. You can use the same shortcut, for instance, that is accessible in terminal, and also in the main editor, and it is context sensitive to that area. The user is allowed to add or change any shortcuts themselves, and third-party extensions can add their own.

Because of the need to keep this within a 500-word range, I will continue this discussion with my investigate on Extensions exclusively on my next blog post.

PARTIAL LIST OF USEFUL SHORTCUTS:

These shortcuts are broken into 3 sections (Open/View, Working with files, and Code Editing).

Open/View:

• 1.         Opens command palate. – Shift+Ctrl+P
• 2.         Access Settings – Ctrl+,
• 3.         Toggle terminal – Ctrl+`
• 4.         Toggle Sidebar – Ctrl+B
• 5.         Open new window – Shift+Ctrl+N
• 6.         Close Window – Ctrl+W
• And, one of my favorites:
• 7.         Selecting a vertical column of characters – Ctrl+Alt+Shift + Mouse select

Working with files:

• 1.         Sidebar focus                          – Shift+Ctrl+E
• 2.         Open File/Folder from Sidebar – Ctrl+Down
• 3.         Change file tabs                      – Ctrl+PageUp
• 4.         Quick File Open                     – Ctrl+P
• 5.         Open File Explorer                 – Ctrl+O
• 6.         New File                                  – Ctrl+N
• 7.         File Save                                 – Ctrl+N
• 8.         Save file/Save All                   – Ctrl+S  or ( Save All Ctrl K,S )
• 9          lose File                                   – Ctrl+
• 10.       Delete File                               – Ctrl+Delete
• 11.       Zoom                                       – Ctrl++ ( Zoom in ) or Ctrl+- ( Zoom Out )
• 12.       Split Editor                             – Ctrl+\

Code Editing:

• 1. Navigate through line by word       – Ctrl+Right (Forward ) Ctrl+Left (Backward)
• 2. Move to beginning/end of line        – Home/End
• 3. Move line up/down                         – Alt/Up-arrow Alt/down-arrow
• 4. Go to start/end of file                      – Ctrl+Home Ctrl+End
• 5. Cut, Copy, Paste                             – Ctrl+X,Ctrl+C, Ctrl+V. If you are hovering over a line or a line is selected, the line will be used. If an item is selected, it will be the item affected.

Reference:

[1] VSCode Keyboard shortcuts for Productivity – Traversy Media

[2] VSCode keymapping documentation

From the blog cs@worcester – (Twinstar Blogland) by Joe Barry and used with permission of the author. All other rights reserved by the author.