Things to Learn to Develop Modern Web Applications.

27.05.2019 Programs

In this regard, the question is - what else do you need to know?

You need a backend anyway.

If I understand correctly, Angular, Vue and other frameworks are only frontend.

Everything is correct.

Wherever you go, everywhere they talk about web development as the development of the frontend, and this is certainly connected with Node.js (in order to write something in angular, there is no way without it). How the frontend is connected with Node.js - I don't understand, because Node.js is essentially a way to run JS outside of the browser.

Most likely you are reading articles about the frontend, so there is nothing about the backend in them. As you know, the frontend is written in JS and many are captivated by the fact that you can raise NodeJS on the backend and using one language create websites.

If I want to run my application in a browser, then why do I need node? All this brings me into a stupor, I see only contradictions.

Don't be confused. There are technologies that are used in the process work applications and there are technologies that are used in the process development applications. All these Gulp, Grunt, Babel, Webpack and others are development tools. They speed up, simplify, improve the quality of work. At that time jQuery, Angular, React are libraries and frameworks with which the application will work.

If earlier sites were created using a couple of technologies, then modern applications can use dozens, or even hundreds of the latter. Moreover, it can be different programming languages, libraries, frameworks, services, etc. All of this is often referred to as the "zoo" of technology.

Here I can only assume that the server, instead of html, should exchange data with the application using json or something else.

Yes, JSON is the most common. You need a backend framework where you can deploy REST APIs. As far as I know, most modern frameworks of modern programming languages that are used for web development can do this. I cannot say for sure, I work within the framework of one language.

After all, the server is the backbone of any network application, and first of all, you need to develop the server side.

Definitely. Modern single page applications (SPA) consist of two separate parts - the front-end and the back-end. They can be created completely separately by different developers, the main thing is to agree on the data transfer format and all the nuances.

The beauty of a SPA is in separating these parts. Any of them can be replaced with another without any special consequences. One backend can serve websites, mobile applications, provide data access for third-party partner applications, all through a single API.

What else do you need to learn? Or is the listed knowledge enough?

I don't think that's enough. You will precisely define the tasks that your project should solve and select technologies for them. You need to focus on one thing, you will not be able to study everything modern, there will not be enough time.

Is it possible not to use Node.js and thus npm if JS (TS) is only required in the browser? In this case, testing is also necessary.

Yes, it is quite. On the client side, for example JS + Angular. And on the backend side, for example, PHP + Laravel. Now there are a lot of languages and even more frameworks for them. Choose whichever is easier for you.

This article is primarily intended for Internet users; its goal is to highlight some of today's Internet technologies from the point of view of their consumer. However, as practice shows, knowledge of such questions is also necessary for some novice developers.

10-15 years ago, most Web sites were a collection of static HTML pages. Today, sites like this are still found — often this is how small personal Web sites are designed, as well as sites of small companies that pretend to be nothing but a relatively small amount of infrequently changing information. Note, however, that in the process of transforming the Internet from a set of information resources into a tool for doing business, technologies for creating sites have changed significantly - most of the websites of large companies are a set of applications that have interactivity, personalization tools, means of interaction with customers (up to accepting orders and payments) and partners, and often by means of integration with "internal" corporate applications of the company. The tools for creating such Web sites will be described in a little more detail in the article "Products for creating corporate Internet solutions" in this issue of the magazine. In this article, we will only briefly highlight the technologies that underlie modern Web applications. A user who deals with Web applications (and more recently - with Web services) communicates with them through Internet clients (most often browsers, but not only them - there are other types of client applications, for example, chat clients) ... Therefore, it is pertinent to talk separately about what can be used in client applications and what can be used on Web servers.

Technologies used in web clients

One direction in which Web applications have evolved has been to place some of the application logic (such as validating input data) in the Web client itself, such as a Web browser. In particular, modern Web browsers are capable of interpreting scripting language code, executing Java applets and ActiveX controls, and using other add-ons such as the Macromedia Flash Player. Let's take a closer look at all these browser capabilities.

Scripting languages

Most modern Web browsers are capable of interpreting code in scripting languages such as VBScript and JavaScript. Code in these languages is embedded in a Web page and interpreted by the browser. A typical example of the use of scripting languages is to check the correctness of data entered by the user into the corresponding fields of an HTML form, directly during or after the input process, without accessing the Web server. Similar examples of the use of scripting languages can be found when filling out some questionnaires and receiving messages that the required fields are not filled (in fairness, we note that not all questionnaires are implemented in this way).

However, there are other examples of the use of scripting languages that implement both purely design ideas, for example, buttons that change their appearance when the cursor is hovered over them, "creeping lines", and other functionality, for example, embedded in Web pages means of referring to search engines, display dialog boxes, control of other objects embedded in a Web page (for example, Java applets or ActiveX controls, which will be discussed below).

Note that the code created using scripting languages cannot work on its own - it is executed in the address space of the browser. In addition, scripting languages contain a limited set of tools (for example, they do not have tools to access the file system).

Java applets

Almost all modern browsers are capable of displaying and executing Java applets, which are special Java applications that the user receives as part of a Web page. These applications are often included in Web pages to add functionality that is difficult or impossible to implement using scripting languages. Applets can run on all platforms for which the Java Virtual Machine is available.

Applets are usually created according to rules that specify their period of life and how they interact with their environment. Most often, these methods are very limited (for example, operations such as reading and writing files are prohibited by default for applets; if such operations are necessary, permissions for their execution for specific applets and specific files are described on the client computer; network access from the applet is possible only to the computer from which it was loaded; launching other applications on the user's computer from applets is impossible). However, the applet can read the values of parameters (for example, colors, fonts, files with graphic images used when executing the applet) from the containing Web page and change its behavior in accordance with these parameters. In addition, the parameters of the applet can be changed dynamically from the code in the scripting languages contained in the same page.

Note that because applets implement the execution of code on the client machine, they are to some extent potentially harmful content. That is why all modern browsers have tools available to the user to limit the possibilities of running applets.

ActiveX controls

Some of the modern browsers (in particular, Microsoft Internet Explorer) can serve as containers for ActiveX controls - special COM servers that run in the browser's address space and are also received as part of a Web page.

Using ActiveX controls, as well as using Java applets, you can implement any functionality, including those unfavorable for the user's computer, while, unlike Java applets, when executing ActiveX controls, in general, there are no restrictions on access to files and other resources of the operating system and the network, and the code contained in them is executed on behalf of the user who loaded them. Like Java applets, ActiveX controls can read their properties from the page that contains them; in addition, the properties of an ActiveX control can be changed dynamically from the scripting language code contained in the same page; the same code can handle events that occur on such controls.

Further, we should recall the banal truth, which, as practice shows, is not obvious to all of our readers. When working with ActiveX controls and Java applets, it is absolutely useless to rely on antivirus software (it does not matter if it is client or server): the signs typical of viruses (such as the ability to infiltrate executable files and documents), such applications, as a rule, do not contain. You can only prevent the download or execution of the corresponding code, either at the browser settings level, or at the corporate or personal firewall level.

Macromedia Flash Applications

Macromedia Flash applications are the most popular extensions to the functionality of Web browsers today - they are used by many Web designers to give their sites interactivity and originality.

The Flash application security model is based on the fact that Macromedia Flash Player, like the Java virtual machine, runs applications in a limited address space, while the running applications do not have access to the file system (except for one specific directory used by Macromedia Flash Player for business purposes ) and other resources of the user's computer; an exception is made for microphones and video cameras, but the user must give permission to transfer data received from these devices. Access to network resources is limited to the domain from which the application was obtained. Note that Flash applications can also be controlled using JavaScript on the same page. Macromedia Flash Player itself for Microsoft Internet Explorer is an ActiveX control and uses the power of ActiveX controls to access properties of Flash applications from scripting languages.

Note that in addition to the above-mentioned most popular tools for extending the functionality of browsers, there are a number of other tools, usually implemented in the form of so-called plug-ins. Because plug-ins are also executable code, modern browsers have a way of limiting what they can do to load and execute them.

In conclusion, we note that the listed tools for extending the functionality of HTML pages can also be used in dynamic pages generated by server Web applications. For example, in recent years, tools for creating Web applications that run under the control of Web servers and generate dynamic HTML pages with embedded scripting language code intended for interpretation by a browser have become widespread.

Technologies for creating server-side parts of Web-applications

As we have already seen, the possibilities associated with executing code in Web clients can be significantly limited both technologically and through administration and user settings. This is broadly consistent with reasonable security requirements. That is why, along with the development of tools for extending the functionality of browsers, technologies related to the execution of application code not in browsers, but on the Web servers themselves, have evolved. Below we will very briefly take a look at the most common ones.

CGI

The Common Gateway Interface (CGI) is a standard interface that allows server-side applications invoked via URLs to run. Input information for such applications is the content of the HTTP header or the body of the request, depending on the protocol used. CGI applications generate HTML code that is returned to the browser. Note that at one time the term "CGI script" was also widely used, the origin of which is explained by the fact that such applications were written in scripting languages such as Perl, which, nevertheless, are executed not in the browser, but on the server. You can create CGI applications using almost any development tool that generates console applications for the operating system that runs the Web server.

The main problem with all CGI applications is that with each client request, the server loads this application into a separate address space, and then initiates its execution and unloading. This feature limits application performance and the ability to handle large numbers of client requests concurrently.

ISAPI and Apache DSO

The performance bottleneck for Web applications that run in a separate address space can be solved by creating the application as a library that loads into the Web server’s address space and stays there if necessary to process subsequent requests from other clients; naturally, in this case, the web server must support loading such libraries. Such applications for Microsoft Internet Information Servise are called ISAPI (Internet Server Application Program Interface), and for the very popular Apache Web server, such libraries are called Apache DSO (Dynamic Shared Objects). Note, however, that when creating both CGI and ISAPI applications, it was rather difficult to separate the tasks of Web design from tasks related to the implementation of functionality and application logic - such applications generate entire Web pages, so all data associated with the design of these pages should generally be contained within an executable file.

ASP, JSP, PHP

The next step in the development of technologies for creating Internet applications is the emergence of tools that allow you to separate the tasks of Web design from the tasks associated with the implementation of the functionality of applications. The first of these technologies was Active Server Pages (ASP), built on the basis of an ISAPI filter. The basic idea behind ASP is to create Web pages with scripting language snippets embedded in them. However, unlike the above tools for using scripting languages to extend the functionality of browsers, these code fragments are interpreted not by the browser, but by the server (more precisely, by the ISAPI library intended for this), and the result of executing these code fragments replaces the code fragment itself in that version of the page. that is passed to the user's browser. Soon after ASP, other technologies emerged that implemented the idea of placing code within a Web page for the Web server to execute. The most famous of them today is the JSP (Java Server Pages) technology, the main idea of which is one-time compilation of Java code (servlet) when it is first accessed, executing the methods of this servlet and putting the results of these methods execution into a data set sent to the browser. Another popular technology of this type is PHP (Personal Home Pages), which uses CGI applications that interpret script code embedded in an HTML page.

ASP .NET

The newest version of Active Server Pages technology is ASP .NET, which is the core architecture of the Microsoft .NET Framework. The main difference between this technology and ASP in terms of application architecture is that the code present on the Web page is not interpreted, but compiled and cached, which naturally improves application performance.

Using ASP .NET, you can create Web applications and Web services that not only allow you to implement dynamic generation of HTML pages, but also integrate with server components and can be used to solve a wide range of business problems faced by developers of modern Web applications. ...

In general, the client of a Web server can be not only a personal computer equipped with conventional Web clients (for example, a Web browser), but also mobile devices characterized by a limited screen size, low memory, and often the inability to display graphics. These devices have their own data transfer protocols (Wireless Access Protocol, WAP) and corresponding markup languages (WML, Wireless MarkupLanguage, СHTML, Compact HTML, etc.). In this case, it is necessary to transfer data to a mobile device in an appropriate format, for which special sites are often created (for example, supporting WAP and WML). It seems more convenient to create applications that are able to generate one or another code depending on the type of client. This is exactly the approach implemented in Microsoft ASP .NET.

A few words about application servers

As the amount of data used and the number of visitors to Web sites increases, so does the requirements for the reliability, performance, and scalability of Web applications. To meet these requirements, the business logic implemented in the Web application, as well as the data processing and transaction services, are decoupled from the application interface and transported to the application server as business objects. Application servers and related business objects can be of various types (the most common today are servers that support the Java2 Enterprise Edition specification and servers that are based on COM and Microsoft .NET technologies). However, consideration of application servers is beyond the scope of this article ...

Note that business objects often provide access to data from corporate information systems or implement some part of their functionality by integrating Web applications with other applications used in the enterprise.

Web services

When talking about server-side Web technologies, one cannot ignore the important one like XML Web services. XML Web services are now often tasked with solving many of the tasks associated with integrating applications, including those created on different platforms. You can create Web services as executable files, as libraries, and as interpreted code; there are also means of representing business objects as Web services. Web services methods can be called from common applications, Web applications, and other Web services, and, with rare exceptions, end users do not deal directly with Web services. Recently, however, there has been a massive emergence of applications using Web services, including applications intended for end users.

Conclusion

In this article, we discussed the most popular technologies used in creating Web applications, namely: browser extensions such as scripting languages, ActiveX controls, Java applets and Macromedia Flash applications, as well as technologies for creating server-side Web applications, such like CGI, ISAPI, ASP, JSP, PHP, ASP .NET.

Read completely

Learn powerful new approaches to web architecture and experience-driven website design. The book provides a pragmatic, problem-solving and user-centered approach to planning, designing, and developing dynamic web applications. You will learn how to get the most out of Domain-Driven Design, identify the optimal supporting architecture, and master modern experience-driven design approaches. The author discusses the selection and implementation of specific technologies, as well as the main topics related to the experience of interaction, including the design of mobile web applications and responsive design. You will learn how to get the most out of Microsoft technologies such as ASP.NET MVC and SignaIR in combination with other technologies such as Bootstrap, AJAX, JSON, and JQuery. By leveraging these technologies and mastering the new ASP.NET Core 1.0 platform, you can quickly develop complex web applications that address the challenges of the day and provide a great user experience.
Dino Esposito, multiple Microsoft Most Valuable Professional, teaches you:
- design websites and web applications that reflect real social and business processes;
- use domain-specific design techniques to analyze and reduce the complexity of subject areas;
- use experience-oriented design to reduce costs and meet user requirements;
- Realistically compare server and client web paradigms;
- the basics of the new ASP.NET Core 1.0 platform;
- Simplify the development of modern web pages using the Bootstrap framework;
- practical and effective techniques for implementing ASP.NET MVC projects;
- take into account new possibilities for the implementation of storage mechanisms and work with data models;
- understand the advantages, disadvantages and trade-offs of responsive web design;
- create truly mobile and mobile-optimized websites.

Hide

Web design apps have changed the way designers have been developing websites for a long time. Using modern tools makes things much easier and faster, for example if you use auto-completion apps and macros. Today, designers who prefer to design visually can use some of these apps to create designs that can be turned into code that can then be pinned online.

The fact is, most web development platforms these days make it much easier for professionals to develop their websites. For example, if you are out of range of the Internet connection, and want to continue to work on your project, these applications will help a lot with this.

There are many great web development apps out there, and here are some of the best you may want to consider using.

This is an application that can help you create your own professional standard websites in a few minutes. This is the best application you should consider if you are looking for a web development tool that will do everything for you, especially if you are a Windows user. There are two versions, free and premium (paid), but both are equally impressive. The application combines WYSIWYG design and coding, giving you a tool that not only works very quickly, but is also very easy to learn. The free version may lack some of the features that the paid version does, but it's still an amazing app that deserves your attention.

It is the best app to use, responsive sites that will also look aesthetically pleasing on both simple computers and mobile devices. With Mobirise, website creation can be a lot of fun. The tool comes with various boxes that web developers can select and drag to where they would like to place them, then change the default settings to suit their needs.

It is a versatile text editor that comes with many awesome tools for web developers. He may not be the best, but he is definitely good. It is a Windows interface that offers an excellent programming editor that includes templates for the most common programming languages such as HTML, VBScript, FTP client, PHP.

A very responsive web development application that you should consider as one of the tools for your projects. There is a free version with limited features that you can use, and a paid version that offers you full functionality that you can use in your web development. TOWeb is a very easy to use application containing amazing templates that can be customized to your liking. Like the previous tool, TOWeb supports many programming languages.

This is the best application you can use if you want to create awesome animations for your websites. Most often it is used by designers directly involved in animation and advertising, so if you are the very designer who creates animated elements for use in other programs that may be available on all platforms, then this is the application for you. There are a number of components you'll love about this app, including Google Drive integration, events, 3D objects, layers, and more.

A very simple drag-and-drop editor, best suited for beginners who are developing their first websites. This app comes with free hosting and unlimited pages, among all the other great features. If you want to create a fantastic website without spending too much time creating it, then this program will come in handy.

A great app that you can start using right now. The tool is based on Firefox and offers a modern approach to building great websites. It has outstanding features, and although most of them require a license purchase to use, there are some that are offered to you for free, though limited in use.

This is a web application that is great for web development, however, due to its complexity, it is not quite suitable for beginners. However, while the tool is not that easy to use, it offers tremendous opportunities for those with some prior experience in web development.

A text editor that is only intended for the most advanced web developers. The fact that it is a text-based tool makes it not entirely suitable for beginners, but if you have a little coding experience then this is an app worth considering for web development projects. It's small and lightweight, and you can even carry it on a USB stick. SynWrite is a full featured tool, with macro recording, clipboard history, plugins, tons of coding help, previews and palettes. It also allows developers to search and replace across multiple files as well as code templates. This is probably the best application to be used throughout the entire project - from creating a layout to writing code.

It is a stylish web development application that can help you create shiny, aesthetically pleasing websites. An online app that offers great features if you pay for them, meaning you can expect a little more features if you're willing to part with a few extra dollars. There is also a free version, however it doesn't have as many features as the paid version.

Web development applications are designed to make your job easier by providing some of the features and tools that you will need as a developer. Your choice should depend on the features you are looking for and the type of website you would like to create.

Recently, mostly related to UX and performance.

I want to present 7 actionable principles for websites that want to use JavaScript to control their UI. These principles are the result of my work as a web designer, but also as a longtime WWW user.

JavaScript has undeniably become an indispensable tool for front-end developers. Now its scope is expanding to other areas such as servers and microcontrollers. This programming language was chosen by prestigious universities to teach students the basics of computer science.

At the same time, there are a number of questions regarding its role and specific use, which many find it difficult to answer, including the authors of frameworks and libraries.

Should JavaScript be used as a replacement for browser functions: history, navigation, rendering?
Is the backend dying? Do I need to render HTML at all?
Is it true that Single Page Applications (SPA) are the future?
Should JS generate pages on a website and render pages on web applications?
Do I need to use techniques like PJAX or TurboLinks?
What is the exact difference between a website and a web application? Should there be one thing left?

My attempts to answer these questions will follow. I tried to research how to use JavaScript from a user (UX) perspective. In particular, he paid special attention to the idea of minimizing the time it takes for the user to obtain the data of interest. Starting with the basics of network technologies and ending with predicting future user behavior.

1. Rendering pages on the server is optional

tl; DR: rendering on the server is not for SEO, but for performance. Take into account additional requests for scripts, styles, and subsequent API requests. In the future, consider the use of the HTTP 2.0 Push method.

First of all, I am forced to draw attention to the common mistake of separating "server-rendered applications" and "single page applications". If we want to achieve the best user experience, then we should not limit ourselves to such a framework and abandon one alternative in favor of another.

The reasons are quite obvious. Pages are transmitted over the internet, which has physical limitations, as Stuart Cheshire famously illustrated in his famous essay "It's latency, fool":

The distance between Stanford and Boston is 4320 km.
The speed of light in a vacuum is 300 x 10 ^ 6 m / s.
The speed of light in an optical fiber is approximately 66% of the speed of light in a vacuum.
The speed of light in optical fiber is 300 x 10 ^ 6 m / s * 0.66 = 200 x 10 ^ 6 m / s.
One-way delay in transmission to Boston 4320 km / 200 x 10 ^ 6 m / s = 21.6 m / s.
Roundtrip transmission delay 43.2 m / s.
Ping from Stanford to Boston on the modern Internet is about 85 ms (...)
So, modern Internet equipment transmits a signal at a speed of 0.5 times the speed of light.

The indicated result of 85 ms can be improved (and now it is a little better), but it is important to understand that there is a physical limitation on the delay in transmitting information over the Internet, no matter how the bandwidth on users' computers increases.

This is especially important due to the growing popularity of JavaScript applications, which usually contain only markup.