Category Archives: CS-343

Angular

After finishing our final project I was still curious on many things about angular and how we would use it in future projects if we were to transition over to becoming a front end developer. This blog ‘Why should you learn Angular in 2018?’ by Aman Goel talks about Angular is, the different types, and the advantages.

From what I’ve learned, Angular is a framework that developers use to build applications (a simplified view). Goel talks about the development of angular applications and how it incorporates Typescript along with HTML and CSS. I know I built my project with the latest version of angular when I created it with the @angular-cli/@latest command but apparently there are versions from Angular 1 to Angular 7 and skipping Angular 3.

Some advantages of using Angular is that it supports Single Page Applications which is what we did for our project. A single HTML page that is updated dynamically according to the interaction of the user.

He lists the advantages of using Angular as seen down below:

– Supports Single Page Applications
– Two-way data binding
– Modularity in Angular
– Reduced coding
– Declarative User Interface
– Easy Integration
– Cross Platform

Before reading this blog I did not know how much we learned from doing this project but after reading it, I realized that all of the advantages listed in this blog were used in the process.

As always, subscribe if you are interested in Computer Science ideas/technologies/topics!

From the blog CS@Worcester – Life in the Field of Computer Science by iharrynguyen and used with permission of the author. All other rights reserved by the author.

Proxy Design Pattern

Motivation:

Sometimes we need the ability to control the access to an object. For example, if we need to use only a few methods of some costly objects we’ll initialize those objects when we need them entirely. Until that point, we can use some light objects exposing the same interface as the heavy objects. These light objects are called proxies and they will instantiate those heavy objects when they are really need and by then we’ll use some light objects instead.

This ability to control the access to an object can be required for a variety of reasons: controlling when a costly object needs to be instantiated and initialized, giving different access rights to an object, as well as providing a sophisticated means of accessing and referencing objects running in other processes, on other machines.

Consider for example an image viewer program. An image viewer program must be able to list and display high resolution photo objects that are in a folder, but how often do someone open a folder and view all the images inside. Sometimes you will be looking for a particular photo, sometimes you will only want to see an image name. The image viewer must be able to list all photo objects, but the photo objects must not be loaded into memory until they are required to be rendered.

Intent:

The intent of this pattern is to provide a placeholder for an object to control references to it.

Implementation:

proxy-design-pattern-implementation-uml-class-diagram

The participants classes in the proxy pattern are:

Subject – Interface implemented by the realSubject and representing its services. The interface must be implemented by the proxy as well so that the proxy can be used in any location where the RealSubject can be used.

Proxy – Maintains a reference that allows the Proxy to access the RealSubject. Implements the same interface implemented by the RealSubject so that the Proxy can be substituted for the RealSubject. Controls access to the RealSubject and may be responsible for its creation and deletion. Other responsibilities depend on the kind of proxy.

RealSubject – the real object that the proxy represents.

Applicability:

The Proxy design pattern is applicable when there is a need to control access to an Object, as well as when there is a need for a sophisticated reference to an Object. Common Situations where the proxy pattern is applicable are:

Virtual Proxies: delaying the creation and initialization of expensive objects until needed, where the objects are created on demand.

Remote Proxies: providing a local representation for an object that is in a different address space. A common example is Java RMI stub objects. The stub object acts as a proxy where invoking methods on the stub would cause the stub to communicate and invoke methods on a remote object found on a different machine.

Protection Proxies: where a proxy controls access to RealSubject methods, by giving access to some objects while denying access to others.

Smart References: providing a sophisticated access to certain objects such as tracking the number of references to an object and denying access if a certain number is reached, as well as loading an object from database into memory on demand.

Related Patterns:

Adapter design Pattern – The adapter implements a different interface to the object it adapts where a proxy implements the same interface as its subject.

Decorator design Pattern – A decorator implementation can be the same as the proxy however a decorator adds responsibilities to an object while a proxy controls access to it.

 

Reference

https://javapapers.com/design-patterns/proxy-design-pattern/

 

 

 

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

Are we now Full-Stack Web Developers?

As you may know, for our end of semester senior project we worked in groups of two in charge of developing a web application that had some sort of functionality. When we were first introduced to this we didn’t know whether to feel scared, nervous, excited or all of the above. What is HTML, CSS, angular, boostrap, etc.? So many things were thrown at us but in the end we made it. We learned all of it and no the question is.. are we full-stack devs? Maybe Eric An can answer that question in his article, ‘What is a full-stack web developer?’

The article begins with a big red T shaped image. The T-shaped model is a concept that describes the abilities/characteristics of an individual where a person has many generalized skills with a specialization in few. The full-stack web developer supposedly knows many technologies but specializes in few which is front-end development and back-end development.

Front-End web development is the presentation of the website which includes HTML and CSS and sometimes JavaScript; pretty much everything that the user sees when clicking a link. The goal is for users to provide a platform for users to interact with. Some other skills may be UE/UI design. For our project we learned the basics of HTML and CSS and I also learned how to use bootstrap to make things much simpler. Front-end development was a success!

Onto the back-end web development.. The creation of data collection processes haunts us to this day. We redefined the definition of struggle when it came to the back-end part of this project. Back-end development is associated with the front-end where as a server is being created to communicate with that the user is trying to do on the front end.

The definition of a Full-stack web developer is an individual who is in charge of performing both front-end and back-end so that all of the technologies put together makes up a website. After reading this article, although we are not experts in front-end/back-end development we could be considered full-stack developers!

As always, subscribe if you are interested in Computer Science ideas/technologies/topics!

From the blog CS@Worcester – Life in the Field of Computer Science by iharrynguyen and used with permission of the author. All other rights reserved by the author.

The JPA Architecture

Today, in this final post of the semester for CS-343 I will be examining the JPA architecture. This is something I have been curious about after browsing articles on DZone for the past couple of weeks and seeing this topic pop up a lot, luckily they made a good introduction post this week. From the article: “The Java Persistence API is the Java standard for mapping Java objects to a relational database”, this is something that I have been wondering how to do since we started working with the REST APIs and our projects that have been using Java HashMaps for makeshift databases instead of something more permanent like SQL. This article briefly introduces and explains the functionality of the six key parts of the architecture for JPA. The article gives a diagram for these six units and the multiplicity of their relationships. The article then gives a simple example of mapping a simple Java POJO Student class into data for a database, using the student ID as the primary key. I was surprised at how easy this translation was, all it includes is a couple of tags for columns above the instance variables that designate the database column, and which one is the primary key to generate in the database. The article then creates an application class that uses the various entity classes to store a newly created student into a database. I liked the simplicity of the article as most introductory articles are on this website for what are advanced programming topics, but my biggest criticism is that this article has brief definitions for many of the elements of JPA and then links to an external site that further elaborates on them. I wished that the author put a bit more time and consolidated all of this information into one article for this site, instead of having a bunch of separate webpages on his own website. I also wish he showed in this post getting data from the database and translating it back into Java and performing manipulations on this data with methods. Overall it was a good introduction to a very useful topic and one that I would like to further look at. Going forward, I am much in favor of using this way of storing data as opposed to simple Java in-memory databases for entire applications like we did in our projects.

Source: https://dzone.com/articles/introduction-to-jpa-architecture

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

The Command Design Pattern

Today I am looking at another design pattern. This one is the command design pattern, which is yet another Gang of Four design. They classify it as a behavioral pattern with object as the scope (GoF 223). I wanted to explore this one as reading through the different pattern descriptions in the Gang of Four book, this peaked my interested by its ability to separate requests from objects. The article gives a good summary of the idea of the pattern with a real-life example of a restaurant with a server taking an order from a customer and handing it off to a chef. It then further breaks down the pattern with the usual UML diagram and a helpful sequence diagram that shows the order in which the classes perform the pattern. I found this sequence diagram, along with the comments in the example program with code that show which class matches with which part of the diagrams really useful in this example, as the pattern goes through a couple of classes just to call a basic function on a simple object. Although this pattern does seem complex at first, it has a nice simplicity once you understand what all the classes are doing, and once you get the base created adding more functions is as simple as adding more command classes. The article then creates a simple example with Java of the command pattern using the various classes to switch a light bulb object on and off. I do like the idea of the pattern and its particular implementation in this example. It nicely breaks down requests into their own separate command objects that gives much greater control over requests across a program. I agree that the ability this pattern gives to create a log of function calls and add an ability to undo all functions called on an object is very helpful. I also agree with the author that it can get messy if you have a lot of functions that need to be implemented. As this pattern calls for a separate command class to be made for each function or method performed on an object, this can quickly add up depending on how many methods you need in your program. In the future, I will definitely remember this pattern and its useful ability to separate commands from the objects it performs them on.

Source: https://dzone.com/articles/design-patterns-command

 

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

AngularJS

AngularJS is an open source web application framework. It was originally developed in 2009 by Misko Hevery and Adam Abrons. It is now maintained by Google. Its latest version is 1.2.21. AngularJS is a structural framework for dynamic web applications. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application components clearly and succinctly. Its data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.

GENERAL FEATURES:

  • AngularJS is an efficient framework that can create Rich Internet Applications (RIA).
  • AngularJS provides developers an option to write client-side applications using JavaScript in a clean Model View Controller (MVC) way.
  • Applications written in AngularJS are cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser.
  • AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache license version 2.0.

Overall, AngularJS is a framework to build large scale, high-performance, and easy to maintain web applications.

CODE FEATURES:

Data Binding – It is the automatic synchronization of data between model and view components.

Scope – These are objects that refer to the model. They act as a glue between controller and view.

Controller – These are JavaScript functions bound to a particular scope.

Services – AngularJS comes with several built-in services such as $http to make an XML Http Requests. These are singleton objects which are instantiated only once in app.

Filters – These select a subset of items from an array and returns a new array.

Directives – Directives are markers on DOM elements such as elements, attributes, CSS, and more. These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS built-in directives such as ngBind, ngModel, etc.

Templates – These are the rendered view with information from the controller and model. These can be a single file (such as index.html) r multiple views in one page using partials.

Routing – It is concept of switching views.

Deep Linking – deep linking allows to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.

Dependency Injection – AngularJS has a built-in dependency injection subsystem that helps the developer to create, understand, and test the applications easily.

ADVANTAGES OF ANGULARJS:

  • It provides the capability to create Single Page Application in a very clean and maintainable way.
  • It provides data binding capability to HTML. Thus, it gives user a rich and responsive experience.
  • AngularJS code is unit testable.
  • AngularJS uses dependency injection and make use of separation of concerns.
  • AngularJS provides reusable components.
  • With AngularJS, the developers can achieve more functionality with short code.
  • In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing.

DISADVANATAGES OF ANGULARJS:

Not Secure – Being JavaScript only framework, application written in AngularJS are not safe. Server-side authentication and authorization is must to keep an application secure.

Not degradable – If the user of your application disables JavaScript, then nothing would be visible, except the basic page.

 

References:

https://angularjs.org/

https://en.wikipedia.org/wiki/AngularJS

https://www.w3schools.com/angular/angular_intro.asp

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

Typescript Classes Vs Interfaces

For this blog I will be taking a look at Angular Classes vs Angular Interfaces in Typescript. Angular Classes and Interfaces facilitate not just object-oriented programming but is also used for type-checking in Typescript. As we all should know, a class is generally a blueprint that can be used to create objects that share the same properties or methods. While an interface is a group of related properties or methods that help to describe an object, an interface however does not provide implementation or initialize an object.

Using a class with Typescript boosts the Javascript classes with the power of typechecking and static properties. Whenever the code is transpiled to a target Javascript code, the transpiler keeps the class code present throughout all phases of the code. Classes are looked at as object factories and help to define the blueprint for what an object will look like and should act like. When you create an instance of this class, the object has defined functions and properties. In the example, we create a PizzaMaker class that has a static method called create which defines the name of the Pizza object as well as the toppings. If the PizzaMaker class did not define create as a static method, we must then create an instance of PizzaMaker in order to use the method. Being able to use Typescript with and without an existing instance of a class make them versatile and flexible. Adding a static properties and methods to a class makes them act like a Singleton, while defining non-static properties and method makes them act like a factory.

Screenshot (27)

Typescript interfaces are a virtual structure that only exists within the context of Typescript. The compiler uses interfaces only for type-checking purposes. An interface is a structural contract that defines what the properties of an object should have as a name and as a type. In the code below, you will see how the Pizza Interface lists the name and toppings properties and gives them a type. It does not however, create the event or return any objects.

Screenshot (28)

Both interfaces and classes define the structure of an object and can be used interchangeably depending on the situation.

 

https://toddmotto.com/classes-vs-interfaces-in-typescript

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

Angular Pipes

In this weeks blog post I will be taking another look at Angular and more specifically Custom Pipes in Angular. While Angular has many built in Pipes ready for use, we would like to extend our applications by creating custom pipes for our applications. Custom pipes allow the developer to create a pure function that can accept an input and return a different output. This is done through a transformation within the pipe.

In order to use Pipes in general they must be imported from the Angular core library. In this example, we are looking to convert a file size of 2120109 into a more readable format of something such as 2.5MB. After importing the Pipe library, we must create a class for the pipe and give it a name as seen in the code below. In order to name the pipe (in example seen as “filesize”) we must use the Typescript decorator @Pipe and provide a name that matches the template code name. The pipe must also be registered in your @NGModule under declarations.

Screenshot (24)

After the class is setup, it is time to implement the PipeTransform interface. The interface creates a required contract that the FileSizePipe adheres to. Since the Pipe is being used via interpolation, the file.size variable is passed through the transform method as the first argument. This is used to convert the numeric value into a readable form. The FileSizePipe method transformed the digits into a string and appends ‘MB’ at the end to make it more readable.

Screenshot (25)

In order to make this a custom pipe, the example  adds the capability for an extension to the code. Using a default parameter instead of appending the ‘MB’ to the end of the string which allows us to use the default ‘MB’ or override it when necessary. This must be passed as an argument into the pipe as seen below.

Screenshot (26)

 

https://toddmotto.com/angular-pipes-custom-pipes

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

REST API

Hello dear reader. This is my last blog for my Software Construction and Design and as a very important part of development I choose to talk in this blog post for REST API.

REST API stands for Representational State Transferee and provides a lighter weight compared to SOAP. Instead of using XML to make a request, REST relies on a simple URL in many cases. In some situations, additional information needs to be provided. Most Web services using REST rely exclusively on obtaining the needed information using the URL approach. REST can use four different HTTP verbs (GET, POST, PUT, and DELETE) to perform tasks.
REST-based Web services output the data in Command Separated Value (CSV), JavaScript Object Notation (JSON) and Really Simple Syndication (RSS). The point is that you can keep the output you need in a form that’s easy to understand and use within the language you are using for your application. The information you receive when using REST is a JSON formatted document containing the information you asked for. You can use your browser to interact with the Web service, which makes it a lot easier to create the right URL and verify the output you need to parse with your application.
In most of the part REST is easier and more flexible to use. To use REST you do not need to purchase any tools, Postman or Insomnia can be downloaded for free. REST though, is efficient as it uses the small message formats and it has a fast process.
There are some very strong reasons that you should be using REST. First, REST is the most popular choice of programmers to build APIs.  Also REST API is great on making the data available as a resource as opposed to service.
To create a REST API, the following six architectural constraints are needed: 1. Uniform interface, which means that the same resource should not have more than one URL; 2. Client-server separating, which means that the client and the server should act independently. 3. Statelessness, which means that there should never be any server-side sessions; 4. Cacheable resources, means that the server responses should contain information even though the data sent might or not be cacheable; 5.Layered system, which means there might be different layers of servers between the client and the server that returns the purpose; 6. Code on demands, which means that the response can contain code that the user can execute.

If I also refer to the previous blog about SOAP API I would say that there are clearly good reasons why REST API is a better choice to use when requesting/ expecting data and when you want to build your own program. However the decision is yours. I hope I have helped your CS journey. Till next time…

https://en.wikipedia.org/wiki/Representational_state_transfer

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

Journey into API Management

As I take my final step towards my journey in software C.D.A. this blog would be the last one regarding my journey with learning and researching topic related to my class Software Construction Design and Architecture. For this blog I will be talking about the blog “API management with Kong” by Alexander Melnyk. This blog is about the importance of API management and why does it matter. It also focuses on the Kong Architecture.

In the blog it explain why API management matter. The idea of API management is that it plays an important role when it comes to integration. Which can be done “by providing clear boundaries and abstractions between systems”. The blog also explains a few “ways to tackle the technical complexity and how Kong API gateway can help deal with it”. You may be wondering what is Kong it is an open source API gateway to manage RESTful APIs.” However the blog gives a better description of what and how it is use for. There are five components of Kong architecture:

  1. nginx – “The core low-level component” also the most popular used web server.
  2. OpenResty – “a web platform that glues nginx core, LuaJIT, Lua libraries and third-party nginx modules to provide a web server for scalable web applications and web services.”
  3. Datastore – is a component that “uses Apache Cassandra or PostgreSQL to handle the storage of the configuration data, consumers, and plugins of all APIs.”
  4. plugins – “are Lua modules that are executed during a request/response life-cycle. They enrich the API gateway with functionalities for different use cases.”
  5. RESTful admin API – It is used to manage the API and provide an important tool to automate developers workflows.

The blog goes on and covers the Kong API gateway in action which “will show you how to create a minimal infrastructure for Kong API gateway. Then I will add an API and a security plugin to restrict the access to a specific user.” and then covers the consumers and plugins. If you have found this topic interesting or if your curiously left with question click on the title link above and read the blog the blogger does a much better job at explaining and getting the message across then I do.

Personally I really enjoyed reading the blog because it helped me realize that the Kong Architecture is in fact very useful and important. I also found the blog to be well written full of useful and important information that will benefit me as a software developer.

Thank you for your time. This has been YessyMer in the World Of Computer Science, until next time.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

From the blog cs@Worcester – YessyMer In the world of Computer Science by yesmercedes and used with permission of the author. All other rights reserved by the author.