Lightning overview of web architecture For site builders

Lightning overview of web architecture (For site builders) Dave Nadeau San Diego Supercomputer Center, UC San Diego

Web architecture • Goals of this talk – Review standard web architecture – Highlight where Drupal fits in – Provide context for the rest of the day

Web architecture • Web began in late-1980 s… much more complex now • Standard web architectures have emerged – Servers, frameworks, server-side languages – Many tricks for better performance • Let’s build up a standard web architecture… following things semi-historically…

Pre-web architecture • Files on local disk • Applications access them directly • File sharing by: – Copying files (email, ftp, scp, gopher, …) – Shared file systems (NFS, SMB, …) Local host App Files • Awkward way to share content

Late 1980 s & Early 1990 s Early web architecture • Browser requests files from a web server – URL selects file – Documents are hand-authored HTML • HTML editors Lots of products have come and gone – AOLpress, Composer, Dream. Weaver, Expression Web, Front. Page, Go. Live, Home Page, Home. Site, Client host i. Web, Page. Mill, Quanta, Web. Matrix, Word, … Browser Cache Network Files Server host Web server

Hand-authored HTML Header menu Title • No persistent state – No logins, shopping carts, … • No customized content Sidebar – No e. Commerce, social, news, … Body Sidebar Footer menu Footer • • No dynamic content (AJAX) No site search No separation of content & layout Hard to upgrade site – No new menus, layout, styling • Doesn’t scale – Every page is hand-authored

Evolving web architecture Early 2000 s • Documents are hand-authored HTML + code – Code is executed on server to generate a customized page – Frameworks help build page & access database • Server-side languages – Active. VFP, ASP. NET, Cold. Fusion, Groovy, Hack, Haskell, Javascript, Lasso, Parser, PHP, Ruby, Scala, SMX, Web. DNA, Xhp, … Lots of languages have come and gone Client host Browser Cache Network Media Code Web server Server host Engine Database server Content

Hand-authored HTML + code Header menu code Title code Sidebar code Body code Footer menu code Footer code • Page code can build page sections, alter menus, query DB – If body in DB, can do site search • No dynamic content (AJAX) • No separation of content & layout • Hard to upgrade site – No new layout, styling • Requires programmer to author • Doesn’t scale – Every page is hand-authored Database

Late 2000 s Current web architecture • No more hand-authored HTML files – URL selects content, not a file – Pages built on-the-fly via database queries • Content Management Systems (CMS) Several CMSs have come and gone (or are on decline) – Bitrix, Blogger, Daisy, DNN, Drupal, Front. Page, Joomla, Lenya, Magento, Mambo, Movable Type, Open. Cart, Client host PHP-Nuke, Presta. Shop, Radiant, Shopify, Browser Cache Squarespace, TYPO 3, Weebly, Wix, Word. Press, … Network Media Code Web server Server host Engine Drupal Database server Content

Content management system • CMS builds pages – Modules build page parts – Many modules to choose from Database CMS Page generator Header generator Menu generator Footer generator Sidebar generator Header menu Title Sidebar Body Sidebar Footer menu Footer Body generator • • • Customized content Dynamic content (AJAX) Persistent state Site search Easy site upgrades Separation of content & layout – No programming to create content • Scales!

Performance issues • More content & more users = more performance issues – Database bottleneck – Web server bottleneck – Network bottleneck Client host Browser Cache Network Media Code Web server Server host Engine Drupal Database server Content

Improving database performance • Move database to dedicated host – Lots of memory, SSDs, and other file system tuning • Replicate the database host – Multiple hosts to serve more traffic • Host database in the cloud Client host Browser Cache Network Server host Web server Media Code Engine Drupal Database host Database server Content

Improving web server performance • Enable server language compilation & code caching • Replicate the web server host – Multiple hosts to serve more clients • Host web servers in the cloud Client host Browser Cache Network Server host Web server Media Code Engine Drupal Database host Database server Content

Improving latency problems • Cache frequently-used media files in memory – Less disk I/O for faster turn-around • Replicate media files to multiple servers • Host media servers in the cloud – Content Distribution Network (CDN) – Reduced network latency Client host Browser Cache Network CDN Web server Media Memory cache Server host Web server Media Code Engine Drupal Database host Database server Content

LAMP • LAMP = Linux + Apache + My. SQL + PHP – The most widely-used combination for web serving Client host Browser Cache Network CDN Web server Media Memory cache Server host Web server Media Code Engine Drupal Database host Database server Content

LAMP • LAMP = Linux + Apache + My. SQL + PHP Server OSs UNIX 68% Windows 32% W 3 Techs 7/2018 Client host Browser Cache Network CDN Web server Media Memory cache Server host Web server Media Code Engine Drupal Database host Database server Content

LAMP • LAMP = Linux + Apache + My. SQL + PHP Web servers Apache 46% Nginx 39% IIS 10% Lite. Speed 3% GWS 1% Client host W 3 Techs 7/2018 Browser Cache Network CDN Web server Media Memory cache Server host Web server Media Code Engine Drupal Database host Database server Content

LAMP • LAMP = Linux + Apache + My. SQL + PHP Open Source DBs My. SQL #1 Postgres #2 Mongo. DB #3 Redis #4 Elastisearch #5 Client host DB Engines 8/2018 Browser Cache Network CDN Web server Media Memory cache Server host Web server Media Code Engine Drupal Database host Database server Content

LAMP • LAMP = Linux + Apache + My. SQL + PHP Server-side languages PHP 84% ASP. NET 13% Java 2% Ruby 0. 6% Cold. Fusion 0. 6% Java. Script 0. 5% Client host Browser W 3 Techs 8/2018 Cache Network CDN Web server Media Memory cache Server host Web server Media Code Engine Drupal Database host Database server Content

LAMP • LAMP = Linux + Apache + My. SQL + PHP + Drupal Open source CMSs Word. Press 60% Joomla 6% Drupal 4% Magento 2% Primarily for blogs General purpose Primarily for e. Commerce Client host W 3 Techs 8/2018 Browser Cache Network CDN Web server Media Memory cache Server host Web server Media Code Engine Drupal Database host Database server Content

Questions?