XHP

Last updated
XHP
Original author(s) Marcel Laverdet
Developer(s) Meta Platforms
Initial releaseFebruary 2010 (2010-02)
Stable release
4.1.0 / November 18, 2021;2 years ago (2021-11-18) [1]
Repository
Written in PHP, Hack
Platform Cross-platform
Type PHP Library
License before version 2.6: BSD License, Starting from version 2.6: MIT License
Website hhvm.com/blog

XHP is an augmentation of PHP and Hack developed at Meta (formerly known as Facebook) to allow XML syntax for the purpose of creating custom and reusable HTML elements. It is available as an open-source software GitHub project and as a Homebrew module for PHP 5.3, 5.4, and 5.5. Meta also developed a similar augmentation for JavaScript, named JSX.

Contents

Origins

XHP was loosely inspired by ECMAScript for XML and created by Marcel Laverdet. It was first developed for Facebook Lite as a new UI rendering layer but was later ported over to Facebook's www and mobile web stack as well as incorporated into HipHop for PHP. It was made available to the public in February 2010 [2] and until 2020 accounted for nearly all of Facebook app's server-side generated HTML.[ citation needed ]

In 2020, Facebook redesigned its primary web app [3] to run mostly on React components, rendered both server and client-side. XHP is still used in parts of Facebook but is a legacy technology now being phased out.

Benefits

XHP offers a much cleaner interface to UI programming when outputting HTML in PHP, but has some engineering advantages as well.

Parse-time validation of HTML syntax
XHP validates the syntax and structure of the entire document tree on render and will throw an exception if an element was not closed properly, has invalid children, has an invalid attribute, or is missing required children or attributes.
Automatic XSS protection
Because all rendering to the page is done inside XHP, and it knows what is HTML and what is content, XHP escapes all content without any special effort from the programmer.
Object mutation
XHP objects are stored as standard PHP objects, so they can be manipulated through a DOM-like API, which includes methods such as setAttribute(), getAttribute(), appendChild(), and several others prior to or during render.
Custom HTML
Instead of writing functions to generate HTML, or switching in and out of PHP, custom XHP elements can be defined and mixed in with standard HTML elements that will abstract out common HTML structures.

See also

Related Research Articles

<span class="mw-page-title-main">Document Object Model</span> Convention for representing and interacting with objects in HTML, XHTML, and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

<span class="mw-page-title-main">XML</span> Markup language by the W3C for encoding of data

Extensible Markup Language (XML) is a markup language and file format for storing, transmitting, and reconstructing arbitrary data. It defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. The World Wide Web Consortium's XML 1.0 Specification of 1998 and several other related specifications—all of them free open standards—define XML.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.

<span class="mw-page-title-main">JSON</span> Open standard file format and data interchange

JSON is an open standard file format and data interchange format that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and arrays. It is a common data format with diverse uses in electronic data interchange, including that of web applications with servers.

<span class="mw-page-title-main">YUI Library</span>

The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several core CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animations, and Ajax. It is free, open-source software using the permissive MIT License. As of August 2022, jQuery is used by 77% of the 10 million most popular websites. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin, having at least 3 to 4 times more usage than any other JavaScript library.

Svelte is a free and open-source front-end component framework and language created by Rich Harris and maintained by the Svelte core team members. Svelte is not a monolithic JavaScript library imported by applications: instead, Svelte compiles HTML templates to specialized code that manipulates the DOM directly, which may reduce the size of transferred files and give better client performance. Application code is also processed by the compiler, inserting calls to automatically recompute data and re-render UI elements when the data they depend on is modified. This also avoids the overhead associated with runtime intermediate representations, such as virtual DOM, unlike traditional frameworks which carry out the bulk of their work at runtime, i.e. in the browser.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

Extensible HyperText Markup Language (XHTML) is part of the family of XML markup languages which mirrors or extends versions of the widely used HyperText Markup Language (HTML), the language in which Web pages are formulated.

<span class="mw-page-title-main">Vaadin</span>

Vaadin is an open-source web application development platform for Java. Vaadin includes a set of Web Components, a Java web framework, and a set of tools that enable developers to implement modern web graphical user interfaces (GUI) using the Java programming language only, TypeScript only, or a combination of both.

<span class="mw-page-title-main">CSS HTML Validator</span>

CSS HTML Validator is an HTML editor and CSS editor for Windows that helps web developers create syntactically correct and accessible HTML/HTML5, XHTML, and CSS documents by locating errors, potential problems like browser compatibility issues, and common mistakes. It is also able to check links, check spelling, suggest improvements, alert developers to deprecated, obsolete, or proprietary tags, attributes, and CSS properties, and find issues that can affect search engine optimization.

AngularJS is a discontinued free and open-source JavaScript-based web framework for developing single-page applications. It was maintained mainly by Google and a community of individuals and corporations. It aimed to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in web applications and progressive web applications.

Web Components are a set of features that provide a standard component model for the web allowing for encapsulation and interoperability of individual HTML elements. Web Components are popular approach to build microfrontends.

<span class="mw-page-title-main">React (software)</span> JavaScript library for building user interfaces

React is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta and a community of individual developers and companies.

<span class="mw-page-title-main">React Native</span> Open-source mobile application framework

React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities. It is used to develop the Android and iOS applications at Facebook, Microsoft, and Shopify. It is also being used to develop virtual reality applications at Oculus.

JSX is a JavaScript extension that allows creation of DOM trees using an XML-like syntax. Initially created by Facebook for use with React, JSX has been adopted by multiple web frameworks. Being a syntactic sugar, JSX is generally transpiled into nested JavaScript function calls structurally similar to the original JSX.

<span class="mw-page-title-main">Vue.js</span> Open-source JavaScript library for building user interfaces

Vue.js is an open-source model–view–viewmodel front end JavaScript library for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

<span class="mw-page-title-main">ESLint</span> JavaScript code analysis software

ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code. It was created by Nicholas C. Zakas in 2013. Rules in ESLint are configurable, and customized rules can be defined and loaded. ESLint covers both code quality and coding style issues. ESLint supports current standards of ECMAScript, and experimental syntax from drafts for future standards. Code using JSX or TypeScript can also be processed when a plugin or transpiler is used.

Nuxt is a free and open source JavaScript library based on Vue.js, Nitro, and Vite. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js.

Next.js is an open-source web development framework created by the private company Vercel providing React-based web applications with server-side rendering and static website generation.

References

  1. ↑ "Releases". GitHub . 2023-02-03.
  2. ↑ Laverdet, Marcel. "XHP: A New Way to Write PHP". Engineering at Meta. Meta Platforms, Inc. Retrieved 10 February 2023.
  3. ↑ N. Summers (2020-04-29). "Why Facebook redesigned Facebook.com". Engadget.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.