In this episode, we take a look at the MVC pattern. In short, MVC stands for Model–View–Controller. It is a design pattern used to help us build frameworks for applications. The MVC splits the application into three different sections. Each section represents one word from the abbreviature.
The lesson includes a small example, which uses the MVC pattern, so make sure to check it out.

What are Models, Views, and Controllers?

Each component has a specific responsibility and has a link to the others. That creates a solid structure for our web application.

• Model is the lowest level, responsible for maintaining the data. Each model has a connection to the database and can have relationships to other models. If any data changes, the model will notify the controller.

• The view is the only part of the app the user interacts with directly. It represents the visualization of the data that a model contains. The model never directly communicates with the view.
• A controller is the go-between for model and view. It relays data from browser to app and from app to browser. The controller receives user input, translates it to match the model, and then passes those inputs onto a view.

Using the MVC pattern correctly can help you as a developer. It ensures a smooth and easy-to-follow user experience. Although it takes time to understand how MVC works, it will pay off when creating future applications.

In the end, MVC is not hard to understand. Just keep in mind these key points:

• MVC is an architectural pattern consisting of three parts: Model, View, Controller.
• Model: handles data logic.
• View: displays the information from the model to the user.
• Controller: controls the data flow into a model object and updates the view whenever data changes.

In this lesson, you will become familiar with the Object-Relational Mapping technologies or the so-called ORMs. As a relative newcomer to programming, terms like ORMs can sound intimidating. The nice part about them is that they allow us to write code easier once we understand them.

Object-Relational Mapping technology is the idea of writing queries using your favorite programming language. We interact with a database using our language of choice instead of SQL.

Let’s say that we have an application. An ORM will convert the result of a database query into a class within our application. The selected columns will map to the class properties. On the other hand, if you push data towards the database, an ORM will map the properties of a class into columns of a table. When people say ORM, they refer to a framework that implements this technique. Here are some of the most frequently used ORM frameworks:  Entity Framework, Hibernate, Sequelize, and SQLAlchemy.

In this episode, Svetlin Nakov will explain to you what databases are.  That probably is not news to you, but the world creates a lot of data nowadays. By 2030, more than 465 exabytes of data will be created each day globally. That statistic is proof that handling data becomes essential, and that is where Databases come into the picture.

A database is a place for storing our data but in an organized structure.  Data is organized and stored in the form of tables. A table contains rows and columns. Each row in a table is a record, and column a field that describes the row.  For example, In a customer table, each row is a unique person, and fields like name and address describe this specific customer.

We usually say that our database is MySQL, MongoDB, SQLite, MS SQL Server, etc. That is wrong! They are not databases, but database management systems(DBMS). 

The DBMS is the software that you install on your personal computer or a server, and then you would use it to manage a database. Modern software systems use a DBMS system to manage data instead of implementing the data management internally.

One of the most important DBMS are: 

• Relational Database Management Systems (RDMS)
• NoSQL Database Systems

Today’s demo will be done with RDMSystem. They consider the relationship between the tables by using primary keys and foreign keys. Thus, it offers an advantage over other DBMS by fetching and storing the data. It is used in enterprises for storing large amounts of data.

Examples of RDBMS are:

• Microsoft SQL Server
• SQLite

The next type of DBMS  is NoSQL. Non-relational databases do not store data in tables. Instead, there are multiple ways to store data in NoSQL databases, such as Key-value, Document-based, and Column-based. Each record does not have to be in the same structure as other records. Due to this, to add additional data, you can add more records without changing the structure of the entire database. Although there are many perks to NoSQL databases, SQL databases are still more commonly used at this point.

Database systems are a necessary component of most modern software systems, and software engineers must have at least basic database skills.

In this episode, we’ll focus on modern mobile app development, while using React Native. 

In the previous episode, we reviewed “React“ which is the number one web framework for 2021. Today we will be focusing on modern mobile app development technologies and React Native. 

The lesson includes a small demo React Native mobile app, which defines a JSX component and renders it in the Web browser. 

For front-end and client-side app development, mobile apps are important. To build our mobile application we need to combine development principles, concepts, platforms, technologies, frameworks, libraries, and tools. In this lesson, we will be reviewing the two major mobile app platforms that dominate the markets.

They are Android and ioS. Each one of them has its perks: 

• Android devices are less expensive compared to iOS devices. They also provide more freedom and options for developers. 
• iOS devices are slightly less popular, despite their high price. This market is more profitable because most apps follow a paid model. 

Mobile app development technologies are split into several categories: Android, iOS, and Hybrid. We have talked about the first two, but what are Hybrid technologies? They are based on JavaScript and HTML5 using an embedded Web browser. There are more mobile app dev technologies, but those are the well-known ones we will be talking about. 

In the current lesson, we will review a highly popular JavaScript UI library, called “React“. In short, React.JS is a component-based front-end technology for the Web. The JSX components in React combine HTML and JavaScript to display the component UI, which is bound to the internal component state.

The lesson includes a small demo React app, which defines a JSX component and renders it in the Web browser.

Later in the lesson, you will find a slightly more complicated demo: how to create a simple React calculator, which sums two numbers. We will review each of the files inside the sample React app to understand better how it works internally.

So, what is React?

When we talk about user interface and front-end frameworks, it is worth mentioning React.

• React is a powerful JavaScript library from Facebook for building Web user interfaces using HTML, CSS, and JavaScript. The UI is built from JSX components, which combine HTML + JavaScript using a built-in templating engine.
• React is а component-based UI library.
• With React, developers create reusable UI components, which have a lifecycle, internal state and behavior.

It is discussable whether React is a library or a framework. It is maybe somewhere in between.

By adding some additional components like React Router, MobX, Redux, Flux, React Toolbox, and some others, we can turn to React into a fully-functional Web front-end framework.

In this episode, you’ll learn how to create a desktop application using Windows Forms and C#.  
We will take a closer look at how GUI frameworks work with a live code example.

In programming, GUI means “graphical user interface“, which is a system to interact visually with the users through UI controls, such as forms, buttons, text boxes, and others.
In this session, we will show you a sample desktop app based on the Windows Forms GUI framework. We will build a simple calculator, which sums two numbers.

We will get familiar with the structure and the front-end part of the app: the main form, holding the UI controls. We will look at how the app is built, by extending a class from the UI framework, from a composition of components, and how event handlers are called from the framework to respond to user interactions.

The demo code is designed to run in a Windows environment, using Visual Studio and the .NET Framework. It can’t run on Mac or Linux. Sorry, this is a limitation of the Windows Forms technology.

In this episode, we’ll be talking about UI and component libraries that provide ready-to-use UI controls and program components, and software frameworks that provide a technical foundation for developing certain types of apps. Both libraries and frameworks speed-up software development and are used every day by millions of developers, so you as a developer, should understand these concepts very well.

In this session we will explain the main difference between a library and a framework, which in short is the following:

• Libraries extend your app by plugging a software component in it. They use the traditional program flow.
• Frameworks are foundations of functionality, which developers extend to build an app. They use the “inversion of control” program flow.

Finally, we will explain the concept of “inversion of control” (IoC) and its purpose in modern software development. Svetlin Nakov will give you an example of how UI frameworks take the program execution flow and call your code through events when the user interacts with the user interface. This is an “inverted” program flow – IoC.

In this video you will become familiar with the topic of “routing“, used for navigation in modern app development. In short, routing is the technology used to switch between different UI views (different app screens), based on changes of the current URL in the navigation bar. Routing is typically implemented through a routing library.

In this lesson, we will see how routing works in front-end apps. We will show you a sample routing library, which changes the view on the front-end, when the browser navigates to certain URL. Finally, we will demonstrate the concept of routing with a live coding example in JavaScript, so that we see how everything is done.

In this lesson, you will become familiar with the concept of “templating engines“, which render input data into output document (like HTML) through a template. We will explain how templates combine markup code with programming constructs to visualize data in a target output format.

Along with the slides, at the end of the lesson, we have included a live code example, so you can see how we can render an HTML-based UI with a templating engine. We will use a JSON dataset and the Handlebars templating engine in JavaScript to render the dataset as HTML document.

In this episode, we explain the gist of AJAX and REST, which are widely-used technologies in Web programming. We demonstrate how to use the JavaScript Fetch API to call back-end services and interact with server-side components.

The lesson also includes a live code demonstration of AJAX and REST, so that you get a deeper understanding of their application.

In this lesson,  you will learn which technologies help us build user interfaces for software apps, what is the DOM (Document Object Model) and how we implement DOM interactions in JavaScript using the DOM API. Finally, Svetlin Nakov will explain and demonstrate the AJAX technology, the XMLHttpRequest, and the Fetch API, which allow consuming RESTful APIs from the back-end.

Web front-end, HTML, CSS and JavaScript, together with the Document Object Model (DOM), AJAX and few others are the dominant technology for building user interfaces for modern software apps.

This set of web front-end technologies is known under the name “HTML5 platform” or “The Web Platform“.

(See https://platform.html5.org for more details about the HTML5 platform.)

It consists of lots of technologies, APIs and standards, implemented in the modern Web browsers.

It is very important for every modern software engineer to be familiar with these HTML5 technologies and the concepts behind them.

The current video gives an insight into the difference between front-end and back-end technologies and what the purpose of each is. You also learn what the term full-stack means.