Editing Web development (section)

== Key technologies in web development ==
Developing a fundamental knowledge of [[client-side]] and [[server-side]] dynamics is crucial.{{citation needed|date=December 2023}}

The goal of [[Front-end web development|front-end development]] is to create a website's [[user interface]] and visual components that users may interact with directly. On the other hand, [[Frontend and backend|back-end development]] works with databases, server-side logic, and application functionality. Building reliable and user-friendly online applications requires a comprehensive approach, which is ensured by collaboration between front-end and back-end engineers.

=== Front-end development ===
[[Front-end web development|Front-end development]] is the process of designing and implementing the user interface (UI) and [[user experience]] (UX) of a [[web application]]. It involves creating visually appealing and interactive elements that users interact with directly. The primary technologies and concepts associated with front-end development include:

==== Technologies ====
The 3 core technologies for front-end development are:
* '''HTML (Hypertext Markup Language):''' [[HTML]] provides the structure and organization of content on a webpage.
* '''CSS (Cascading Style Sheet):''' Responsible for styling and layout, [[CSS]] enhances the presentation of HTML elements, making the application visually appealing.
* '''JavaScript:''' It is used to add interactions to the web pages. Advancement in [[JavaScript]] has given rise to many popular front- end frameworks like React, Angular and Vue.js etc.

==== User interface design ====
[[User experience design]] focuses on creating interfaces that are intuitive, accessible, and enjoyable for users. It involves understanding user behavior, conducting usability studies, and implementing design principles to enhance the overall satisfaction of users interacting with a website or application. This involves [[Website wireframe|wireframing]], [[Software prototyping|prototyping]], and implementing design principles to enhance user interaction. Some of the popular tools used for UI Wireframing are -

* Sketch for detailed, [[Vector-based graphical user interface|vector-based design]]
* Moqups for beginners
* [[Figma]] for a free wireframe app
* UXPin for handing off design documentation to developers
* MockFlow for project organization
* [[Justinmind (software)|Justinmind]] for interactive wireframes
* Uizard for AI-assisted wireframing

Another key aspect to keep in mind while designing is [[Web accessibility|Web Accessibility]]- Web accessibility ensures that digital content is available and usable for people of all abilities. This involves adhering to standards like the [[Web Content Accessibility Guidelines]] (WCAG), implementing features like alternative text for images, and designing with considerations for diverse user needs, including those with disabilities.

==== Responsive design ====
It is important to ensure that web applications are accessible and visually appealing across various devices and screen sizes. [[Responsive web design|Responsive design]] uses CSS media queries and flexible layouts to adapt to different viewing environments.

==== Front-end frameworks ====
A [[Web framework|framework]] is a high-level solution for the reuse of software pieces, a step forward in simple library-based reuse that allows for sharing common functions and generic logic of a domain application.<ref>{{Cite journal |last1=Salas-Zárate |first1=María del Pilar |last2=Alor-Hernández |first2=Giner |last3=Valencia-García |first3=Rafael |last4=Rodríguez-Mazahua |first4=Lisbeth |last5=Rodríguez-González |first5=Alejandro |last6=López Cuadrado |first6=José Luis |date=May 2015 |title=Analyzing best practices on Web development frameworks: The lift approach |journal=Science of Computer Programming |language=en |volume=102 |pages=1–19 |doi=10.1016/j.scico.2014.12.004|doi-access=free }}</ref>

Frameworks and [[Library (computing)|libraries]] are essential tools that expedite the development process. These tools enhance developer productivity and contribute to the maintainability of large-scale applications. Some popular front-end frameworks are:

* '''[[React (software)|React]]:''' A JavaScript library for building user interfaces, maintained by Facebook. It allows developers to create reusable UI components.
* '''[[Angular (web framework)|Angular]]:''' A TypeScript-based front-end framework developed and maintained by Google. It provides a comprehensive solution for building dynamic single-page applications.
* '''[[Vue.js]]:''' A progressive JavaScript framework that is approachable yet powerful, making it easy to integrate with other libraries or existing projects.

==== State management ====
Managing the state of a web application to ensure data consistency and responsiveness. State management libraries like [[Redux (JavaScript library)|Redux]] (for [[React (software)|React]]) or [[Vuex]] (for [[Vue.js]]) play a crucial role in complex applications.

=== Back-end development ===
[[Server-side|Back-end development]] involves building the server-side logic and [[database]] components of a [[web application]]. It is responsible for processing user requests, managing data, and ensuring the overall functionality of the application. Key aspects of back-end development include:

==== Server/ cloud instance ====
An essential component of the architecture of a web application is a [[Server (computing)|server]] or [[Cloud computing|cloud instance]]. A [[Cloud computing|cloud instance]] is a virtual server instance that can be accessed via the [[Internet]] and is created, delivered, and hosted on a public or private cloud. It functions as a physical server that may seamlessly move between various devices with ease or set up several instances on one server. It is therefore very dynamic, scalable, and economical.

==== Databases ====
[[Database management]] is crucial for [[Data storage|storing]], [[Data retrieval|retrieving]], and managing data in web applications. Various database systems, such as [[MySQL]], [[PostgreSQL]], and [[MongoDB]], play distinct roles in organizing and structuring data. Effective database management ensures the responsiveness and efficiency of data-driven web applications. There are 3 types of databases:

* '''[[Relational database]]s:''' Structured databases that use tables to organize and relate data. Common Examples include - [[MySQL]], [[PostgreSQL]] and many more.
* '''NoSQL databases:''' [[NoSQL|NoSQL databases]] are designed to handle [[Unstructured data|unstructured]] or [[Semi-structured data|semi-structured]] data and can be more flexible than [[relational database]]s. They come in various types, such as [[Document-oriented database|document-oriented]], [[Key–value database|key-value stores]], column-family stores, and [[graph database]]s. Examples: [[MongoDB]], [[Apache Cassandra|Cassandra]], [[ScyllaDB]], [[Apache CouchDB|CouchDB]], [[Redis]].
* '''Document stores:''' [[Document-oriented database|Document stores]] store data in a [[Semi-structured data|semi-structured]] format, typically using [[JSON]] or [[XML]] documents. Each document can have a different structure, providing flexibility. Examples''':''' [[MongoDB]], [[CouchDB]].
* '''Key-value stores:''' [[Key–value database|Key-value stores]] store data as pairs of keys and values. They are simple and efficient for certain types of operations, like [[Cache (computing)|caching]]. Examples: [[Redis]], [[Amazon DynamoDB|DynamoDB]].
* '''Column-family stores:''' [[Column-oriented DBMS|Column-family stores]] organize data into columns instead of rows, making them suitable for large-scale [[distributed systems]] and analytical workloads. Examples''':''' [[Apache Cassandra]], [[Apache HBase|HBase]].
* '''Graph databases:''' [[Graph database]]s are designed to represent and query data in the form of graphs. They are effective for handling relationships and network-type data. Examples: [[Neo4j]], [[Amazon Neptune]].
* '''In-memory databases:''' [[In-memory database]]s store data in the system's main memory ([[Random-access memory|RAM]]) rather than on disk. This allows for faster data access and retrieval.  Examples: [[Redis]], [[Memcached]].
* '''Time-series databases:''' [[Time series database|Time-series databases]] are optimized for handling time-stamped data, making them suitable for applications that involve tracking changes over time.  Examples: [[InfluxDB]], OpenTSDB.
* '''NewSQL databases:''' [[NewSQL]] databases aim to provide the scalability of NoSQL databases while maintaining the [[ACID]] properties (Atomicity, Consistency, Isolation, Durability) of traditional relational databases.  Examples: [[Spanner (database)|Google Spanner]], [[CockroachDB]].
* '''Object-oriented databases:''' [[Object-oriented databases]] store data in the form of objects, which can include both [[data]] and methods. They are designed to work seamlessly with object-oriented programming languages. Examples: [[db4o]], [[ObjectDB]].

The choice of a database depends on various factors such as the nature of the data, scalability requirements, performance considerations, and the specific use case of the application being developed. Each type of database has its strengths and weaknesses, and selecting the right one involves considering the specific needs of the project.

==== Application programming interface (APIs) ====
[[API|Application Programming Interfaces]] are sets of rules and protocols that allow different software applications to communicate with each other. APIs define the methods and data formats that applications can use to request and exchange information.

* [[REST]]ful APIs and [[GraphQL]] are common approaches for defining and interacting with web services.

===== Types of APIs =====
* '''[[Web API]]s:''' These are APIs that are accessible over the internet using standard web protocols such as HTTP.  RESTful APIs are a common type of web API.
* '''Library APIs:''' These APIs provide pre-built functions and procedures that developers can use within their code.
* '''Operating System APIs:''' These APIs allow applications to interact with the underlying [[operating system]], accessing features like file systems, hardware, and system services.

==== Server-side languages ====
[[Programming language]]s aimed at server execution, as opposed to client browser execution, are known as [[Server-side scripting|server-side languages]]. These programming languages are used in web development to perform operations including [[data processing]], database interaction, and the creation of [[Dynamic web page|dynamic content]] that is delivered to the client's browser. A key element of server-side programming is [[server-side scripting]], which allows the server to react to client requests in real time.

Some popular server-side languages are:

# '''PHP:''' [[PHP]] is a widely used, [[Open-source software|open-source]] server-side scripting language. It is embedded in HTML code and is particularly well-suited for web development.
# '''Python:''' [[Python (programming language)|Python]] is a versatile, high-level programming language used for a variety of purposes, including server-side web development. Frameworks like [[Django (web framework)|Django]] and [[Flask (web framework)|Flask]] make it easy to build web applications in Python.
# '''Ruby:''' [[Ruby (programming language)|Ruby]] is an object-oriented programming language, and it is commonly used for web development. [[Ruby on Rails]] is a popular web framework that simplifies the process of building web applications.
# '''Java:''' [[Java (programming language)|Java]] is a general-purpose, object-oriented programming language. Java-based frameworks like [[Spring Framework|Spring]] are commonly used for building enterprise-level web applications.
# '''Node.js (JavaScript):''' While JavaScript is traditionally a client-side language, [[Node.js]] enables developers to run JavaScript on the server side. It is known for its event-driven, non-blocking [[I/O model]], making it suitable for building scalable and high-performance applications.
# '''C# (C Sharp):''' [[C Sharp (programming language)|C#]] is a programming language developed by Microsoft and is commonly used in conjunction with the [[.NET Framework|.NET]] framework for building web applications on the Microsoft stack.
# '''ASP.NET:''' [[ASP.NET]] is a web framework developed by Microsoft, and it supports languages like C# and [[Visual Basic (.NET)|VB.NET]]. It simplifies the process of building dynamic web applications.
# '''Go (Golang):''' [[Go (programming language)|Go]] is a statically typed language developed by Google. It is known for its simplicity and efficiency and is increasingly being used for building scalable and high-performance web applications.
# '''Perl:''' [[Perl]] is a versatile scripting language often used for web development. It is known for its powerful [[Text processing|text-processing]] capabilities.
# '''Swift:''' Developed by Apple, [[Swift (programming language)|Swift]] is used for server-side development in addition to iOS and macOS app development.
# '''Lua:''' [[Lua (programming language)|Lua]] is used for some embedded web servers, e.g. the configuration pages on a [[router (computing)|router]], including [[OpenWRT]].

==== Security measures ====
Implementing security measures to protect against common vulnerabilities, including [[SQL injection]], [[cross-site scripting]] (XSS), and [[cross-site request forgery]] (CSRF). [[Authentication]] and [[authorization]] mechanisms are crucial for securing data and user access.

==== Testing, debugging and deployment ====
Thorough [[Web testing|testing]] and [[debugging]] processes are essential for identifying and resolving issues in a web application. Testing may include [[unit testing]], [[integration testing]], and [[Acceptance testing|user acceptance testing]]. Debugging involves pinpointing and fixing errors in the code, ensuring the reliability and stability of the application.

* '''[[Unit testing|Unit Testing]]:''' Testing individual components or functions to verify that they work as expected.
* '''[[Integration testing|Integration Testing]]:''' Testing the interactions between different components or modules to ensure they function correctly together.
* '''Continuous Integration and Deployment (CI/CD):''' [[CI/CD]] pipelines automate testing, [[Deployment environment|deployment]], and delivery processes, allowing for faster and more reliable releases.

=== Full-stack development ===
Full-stack development refers to the practice of designing, building, and maintaining the entire [[Solution stack|software stack]] of a web application. This includes both the [[Client-side|frontend]] (client-side) and [[Server-side|backend]] (server-side) components, as well as the [[database]] and any other necessary infrastructure. A full-stack developer is someone who has expertise in working with both the frontend and backend technologies, allowing them to handle all aspects of web application development.

* '''[[MEAN (solution stack)|MEAN]]''' (MongoDB, Express.js, Angular, Node.js) and '''[[MEAN (solution stack)|MERN]]''' (MongoDB, Express.js, React, Node.js) are popular full-stack development stacks that streamline the development process by providing a cohesive set of technologies.

=== Web development tools and environments ===
Efficient web development relies on a set of tools and environments that streamline the coding and collaboration processes:

# '''[[Integrated development environment]]s (IDEs):''' Tools like [[Visual Studio Code]], [[Atom (text editor)|Atom]], and [[Sublime Text]] provide features such as [[Syntax highlighting|code highlighting]], [[Autocomplete|autocompletion]], and [[version control]] integration, enhancing the development experience.
# '''[[Version control]]:''' [[Git]] is a widely used version control system that allows developers to track changes, collaborate seamlessly, and roll back to previous versions if needed.
# '''[[Collaboration tool]]s:''' Communication platforms like [[Slack (software)|Slack]], [[project management]] tools such as [[Jira (software)|Jira]], and [[Collaborative software|collaboration platforms]] like [[GitHub]] facilitate effective teamwork and project management.