# Brief history of frontend development ### Made by Tursunov Didar CSE-2301-M ----- # Early Days of the Web Early Days (Late 1980s to 1990s): The World Wide Web's origins trace back to the 1960s, but it wasn't until 1990 that HTML was invented, giving rise to the World Wide Web. The first web pages were static, consisting of simple text and hyperlinks. --- ### one of the websites from that era - https://itcorp.com/  --- ### another of the websites from that era - https://vortex.com/  ----- # CSS and JavaScript Mid to Late 1990s: CSS was proposed in 1994 to style HTML documents, and JavaScript was introduced in 1995 to make web pages interactive. The combination of HTML, CSS, and JavaScript laid the foundation for modern web development. <!-- # Dynamic HTML and AJAX ---  --> <!-- Late 1990s to Early 2000s: Dynamic HTML (DHTML) combined CSS and JavaScript to create animated and interactive web content.--> ----- # Dynamic HTML and AJAX --- ## Dynamic HTML (DHTML) - Combines HTML, CSS, and JavaScript - Allows content to be changed on the fly - Enables interactive web applications --- ## AJAX (Asynchronous JavaScript and XML) - Technique for creating fast and dynamic web pages - Allows for asynchronous data loading - Updates parts of a web page without reloading the entire page <!-- AJAX (Asynchronous JavaScript and XML) was introduced, allowing for asynchronous web page updates without full page reloads, leading to more dynamic and responsive user experiences. --> -----  <!-- # JQuery --> 2006: jQuery made it easier to handle events, perform animations, and manipulate the DOM. Its cross-browser compatibility and simplicity made it widely adopted among developers. --- At the time when jQuery was introduced, browser APIs were not standardized, which led to inconsistent behavior across different web browsers. When jQuery was introduced in 2006, it resolved widespread issues with inconsistent browser APIs by offering a unified API. This allowed developers to write one codebase for all browsers, streamlining web development and contributing to its swift adoption.. ----- # Responsive Design Early 2010s: As mobile devices proliferated, responsive design became essential. This practice ensured web pages could adapt to various screen sizes and resolutions, providing an optimal viewing experience across different devices. ----- # Rise of Front-end Frameworks --- Mid-2010s: AngularJS was introduced in 2010, bringing concepts like two-way data binding and dependency injection to front-end development. It was followed by React in 2013, which introduced a virtual DOM to optimize rendering performance. Vue.js emerged in 2014, combining reactive data binding and composable view components with an approachable API, making it a favorite among developers for its balance of power and simplicity. ----- # Modern JavaScript (ES6 and Beyond) The release of ECMAScript 2015 (ES6) brought significant updates to the JavaScript language, including new syntax, modules, classes, and arrow functions. This has allowed developers to write more maintainable and modular code. --- # Progressive Web Apps (PWAs) PWAs emerged as a way to deliver app-like experiences in the web browser, combining the best of web and native applications. They are designed to work offline, load quickly, and can be added to the home screen of mobile devices. --- # Component-Based Architecture and Single Page Applications --- Frameworks like React and Vue.js have popularized the use of components, leading to a more modular and reusable codebase. SPAs have become common, where a single HTML page dynamically updates content without full page reloads, providing a smoother user experience. --- # State Management and Virtual DOM Solutions like Redux for React and Vuex for Vue.js have emerged to handle state management, making it easier to maintain application state across all components. Today people might be more familiar with Zustand or Pinia. --- # Meta Frameworks and Tooling With the rise of meta frameworks like Next.js (for React) and Nuxt.js (for Vue.js), developers can now build applications with improved performance and enhanced SEO. The development ecosystem has also seen the growth of build tools like Webpack and task runners like Gulp and Grunt. ----- # Future Trends Front-end development continues to evolve with new trends like server-side rendering, static site generation, and the adoption of TypeScript for type safety. The field is moving toward more performant, scalable, and maintainable applications, with a strong emphasis on user experience. ----- <!-- .slide: class="scrollable-slide" --> # Sources 1. "The History of Frontend Development" - https://blog.logrocket.com/history-of-frontend-frameworks/ 2. "Progressive Web Apps (PWAs)" - https://web.dev/progressive-web-apps/ 3. "JavaScript Frameworks: Angular.js, React.js, and Vue.js" - https://www.altexsoft.com/blog/engineering/the-good-and-the-bad-of-javascript-full-stack-development/ 4. "ECMAScript 6 — New Features: Overview & Comparison" - http://es6-features.org/ 5. "The Evolution of Responsive Design" - https://www.interaction-design.org/literature/article/the-evolution-of-responsive-design 6. "A Look Back at the History of CSS" - https://css-tricks.com/look-back-history-css/ 7. "Dynamic HTML: The Definitive Reference" - https://www.oreilly.com/library/view/dynamic-html-the/1565924940/ 8. "jQuery: Write Less, Do More" - https://jquery.com/ 9. "Knockout.js: Introduction" - https://knockoutjs.com/documentation/introduction.html 10. "Backbone.js" - https://backbonejs.org/ 11. "AngularJS — Superheroic JavaScript MVW Framework" - https://angularjs.org/ 12. "React – A JavaScript library for building user interfaces" - https://reactjs.org/ 13. "Vue.js - The Progressive JavaScript Framework" - https://vuejs.org/ 14. "Svelte: Cybernetically enhanced web apps" - https://svelte.dev/ 15. "Gulp.js - The streaming build system" - https://gulpjs.com/ 16. "Grunt: The JavaScript Task Runner" - https://gruntjs.com/ 17. "Redux - A Predictable State Container for JS Apps" - https://redux.js.org/ 18. "Vuex - State Management for Vue.js" - https://vuex.vuejs.org/ 19. "The Rise and Fall of AJAX" - https://www.w3schools.com/xml/ajax_intro.asp 20. "Component-Based Architecture in Frontend Development" - https://www.toptal.com/front-end/component-based-architecture-react ----- ## Made with ### [reveal.js](https://github.com/hakimel/reveal.js)