THE DOCUMENT OBJECT MODEL(DOM)

Today during instruction, we talked about HTML and CSS. What I found most interesting was structure of the Document Object Model (DOM). 

The DOM refers to the way web elements are organized. 

Consider the html snippet below:

The DOM can be represented as a tree structure. A tree structure refers to a collection of nodes consisting of a value and references to other nodes called children.

The tree structure of the DOM shown above is:

From the above tree, the html tag is a parent to the head and body tags. The head tag has the title tag as the child and the body tag has two children the paragraph and the division tags.

Just like when we learned trees, I realized that traversal is a major advantage of the tree data structure. 

Since the DOM is a tree, we can go forward or backwards in the DOM (in random access). We particularly applied this feature in the CSS when applying different styles to different elements. For example to access the button in the html code above, I will use body.div.button. Styling is eased when different elements are given ids and classes

Additionally, the tree structure of the DOM supports direct deletion of certain elements.

However, the entire document must be parsed before the tree is available to the application which makes the DOM unsuitable for large applications.

Going beyond merely understanding the different html tags enables me to predict what different arrangements of html elements will produce. It has also been a great advantage during styling using CSS because I am able to easily traverse the DOM to access the different elements I want to style.

HOW I FEEL I FIT IN MICROSOFT AND CYBORG

My first week at the TNT Internship has been an introduction to the work culture and values of Microsoft and Cyborg. From networking with Microsoft staff to getting to knowing the people behind different products like Microsoft Teams that I have used before has been so inspirational.

Microsoft air refers to the core values of Microsoft, which are Respect, Accountability, and Integrity. Throughout the program, all interns will be expected to breathe the Microsoft air by upholding these values. These values resonate with my principles, which is a connection to the Company.

“The major aim of the TNT program is to re-define talent,” Vanessa Feliberti, Corporate Vice President of Substrate 365 and sponsor of the TNT program, emphasized in a small group meeting on Tuesday.

As the first Berea College student to participate in the TNT program, this statement was empowering because talent should be viewed through a lens that focuses beyond schools or grades but the projects, the ambitions one has. And from my interaction with fellow cohort members, I can attest to the diversity in talent at the program. The Tech industry not only needs to re-define talent but also embrace diversity during recruitment, which I can see in the TNT cohort.

The program’s purpose is a solution to the big problem in the tech field that I highlighted in my program application: lack of diversity in technology fields. Lack of gender diversity affects creativity and innovation in the technology products developed because there is a limited range of ideas and points of view in decision making and product development.

My major internship goal and its importance to me

My major goal for the TNT Internship is to network with staff at Microsoft and learn about the work culture as a software engineer in a big Tech company like Microsoft.

During a meeting this week,  with our team mentors and coaches who are staff at Microsoft, they shared their experiences at the Company. In the meeting,  I asked them the reason why they chose Microsoft instead of other Tech Companies. One common attribute of Microsoft that attracted our mentors is the flexibility in the project teams at work where they are not afraid of making mistakes. The team members have no expectations of perfection and are willing to work on solutions to the mistakes made by other team members.

As Computer Science majors, we work on different team projects. It is crucial to understand that merge conflicts and other mistakes will occur during the project design process, and the way we react to the mistakes of our team members affects not only the team dynamics but also the product designed. Working in a team with no pressure of trying to be perfect, embracing others' mistakes, and working on solutions is a crucial aspect of software development careers.

Additionally, our other coach, who transitioned from a non-tech field to Microsoft, mentioned how the support provided by the other team members greatly influenced his decision to stay at the Company.

In the Computer Science career, it is easy to keep working on individual group work without taking time to support other team members. However, even in-class assignments, it is crucial to be supportive of others through rendering support to explain a particular concept or reaching out to a team member who did not finish an assignment to inquire if everything is okay. It is such behavior that distinguishes us from robots.

Analyzing th strengths and weaknesses of the technologies I will use during my New Technologist Internship

STRENGTHS AND WEAKNESSES OF REACTJS AND TYPESCRIPT

During the New Technologist Internship with Microsoft and Cyborg Mobile, I will use two major technologies ReactJS and typescript.

REACTJS

ReactJS is an open-source JavaScript library that makes the creation of interactive single page websites and mobile phone applications painless. It is maintained by Facebook and individual developers and companies.

The main objective of ReactJS is to create User Interfaces that improve the speed of the applications. This performance enhancement is supported by a virtual Document Object Model(DOM) that entirely exists in memory and represents the web browser’s DOM. The use of a virtual DOM enables the writing of virtual components whose data React writes in the HTML DOM, resulting into a smoother and faster performance of the applications.

React makes the development of dynamic web applications easier because it uses JSX(JavaScript Extension) which is a particular syntax letting HTML quotes and HTML tags render particular components. This results in less coding yet give more functionality and support the building of the machine-readable code.

ReactJS web applications are comprised of small components that have individual logic and controls. These components output reusable HTML which makes the development and maintenance of React web application easier. These components also enable fast reloading because React uses a virtual DOM that changes individual DOM elements instead of reloading the entire DOM every time.  Furthermore, the components can be nested to enable the development of complex components using simple building blocks.

Another strength of ReactJS is the ability to support handy developers’ tools which make the task of developers understandable and easier. These tools include the chrome and Firefox dev extensions that enable inspection of the React component hierarchies in the virtual DOM through selecting, editing, and examining of components.

Although React is easy to learn for developers with a JavaScript background because of the availability of documentation, tutorials, and other resources, JSX is a barrier for new developers because of its complexity and steep learning curve.

Additionally, ReactJS has a high pace of development causing continuous changes that developers must continually learn. These updates not only make some developers uncomfortable but also affect the documentation because developers need to constantly update documentation depending on the fast-changing updates of React technologies.

A major weakness of ReactJS is that it covers the UI part only of the web application hence requires other technologies to complete web application development.

Typescript

Typescript(TS) is an open-source programming language developed and maintained by Microsoft that compiles to JavaScript. It is a syntactical superset of JavaScript, meaning that all valid JavaScript code is also valid TypeScript code. TypeScript defines the “type” or intended use of given data, unlike traditional JavaScript that is dynamically typed. Unlike JavaScript, TypeScript provides Object-oriented features like classes, interfaces, constructors, access modifiers like public, private, fields, properties, and others.

Although TypeScript inherits the major pros of JavaScript, its major advantage is strong optional static typing. Once a variable is declared, it does not change its type and can take certain values. This enables the compiler to alert a developer of type-related errors during the production phase resulting in fewer errors and better execution during execution. Static typing also gives the code more structure making it self-documenting and more readable.

Since TypeScript does not force declaring types everywhere, it enables developers to change the level of strictness in different parts of the project. This approach distinguishes TS from other statically typed languages allowing developers to find the right balance between flexibility and correctness.

Furthermore, TypeScript supports type inference. Type inference is implicit typing performed by TypeScript so that developers do not provide types where the compiler can find them.

Although the typing system is a great tool, it is overly complicated to use and brings a false sense of security because of the type checks supported by TypeScript. The false sense of security stems from the type checks by TypeScript are during compilation after which the code is purely JavaScript that has no type-checking abilities.

 

Bibliography

1.       Reactjs.org. 2020. React – A Javascript Library For Building User Interfaces. https://reactjs.org  Accessed 17 June 2020.

2.       www.javatpoint.com. 2020. Pros And Cons Of Reactjs - Javatpoint. Available at: https://www.javatpoint.com/pros-and-cons-of-react Accessed 19 June 2020.

3.       Wiseley, M., 2020. Pros And Cons Of Using Typescript In Your Web Projects - Wakefly Blog. Wakefly, Inc. https://www.wakefly.com/blog/pros-cons-using-typescript-web-projects Accessed 22 June 2020.