← Back to Module

Advanced Topics and Future Trends

CMU422: Fundamentals of Web Design - Session 11

Birmingham Newman University

Lecturer: James Williams

Exploring modern web development

3-hour session • 25 slides • 2 interactive tasks

Session Timeline:

  • 10 min: Registration & waiting
  • 20 min: Opening slides
  • 45 min: Task 1
  • 15 min: Break/Catch up
  • 20 min: Secondary slides
  • 45 min: Task 2
  • Remaining: Self-study

Learning Objectives

  • Explore modern web development frameworks
  • Understand Progressive Web Apps (PWAs)
  • Learn about Web Components
  • Discover future web technologies
  • Prepare for industry trends

Modern Web Frameworks

Frameworks provide structure and tools for building complex applications
  • React - Component-based UI library
  • Vue.js - Progressive framework
  • Angular - Full-featured framework
  • Svelte - Compiler-based framework
// React component example
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Vue component example
<template>
  <h1>Hello {{ name }}!</h1>
</template>

Progressive Web Apps (PWAs)

// Service Worker registration
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('SW registered');
    });
}

// Web App Manifest
{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone"
}
  • Work offline with service workers
  • Installable like native apps
  • Push notifications
  • Fast loading and responsive

Web Components

// Custom element definition
class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>h1 { color: blue; }</style>
      <h1>Hello from Web Component!</h1>
    `;
  }
}

customElements.define('my-element', MyElement);
  • Custom elements
  • Shadow DOM for encapsulation
  • HTML templates
  • Reusable components

TypeScript

// TypeScript example
interface User {
  id: number;
  name: string;
  email: string;
}

function createUser(userData: User): User {
  return {
    id: userData.id,
    name: userData.name,
    email: userData.email
  };
}

const user = createUser({
  id: 1,
  name: "John",
  email: "john@example.com"
});
  • Static typing for JavaScript
  • Better IDE support
  • Early error detection
  • Enhanced refactoring

CSS-in-JS

// Styled Components example
const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'black'};
  padding: 10px 20px;
  border: 2px solid blue;
  border-radius: 5px;
`;

// Usage
<Button primary>Primary Button</Button>
<Button>Secondary Button</Button>
  • Dynamic styling
  • Component-scoped styles
  • Theme support
  • Better developer experience

State Management

// Redux example
const initialState = {
  count: 0
};

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}
  • Centralized state management
  • Predictable state updates
  • Debugging tools
  • Scalable architecture

Modern Build Tools

// Webpack configuration
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
  }
};
  • Webpack for bundling
  • Babel for transpilation
  • ESLint for linting
  • Prettier for formatting

Future Web Technologies

  • WebAssembly (WASM)
  • WebGPU for graphics
  • WebRTC for real-time communication
  • Web APIs for device features
// WebAssembly example
WebAssembly.instantiateStreaming(
  fetch('module.wasm')
).then(obj => {
  const result = obj.instance.exports.add(1, 2);
  console.log(result); // 3
});

Task 1: Modern Framework Exploration

Instructions:

  1. Choose one modern framework (React, Vue, or Angular)
  2. Create a simple application using the framework
  3. Implement features:
    • Component-based architecture
    • State management
    • Routing (if applicable)
    • API integration
  4. Compare with vanilla JavaScript
  5. Document your findings

Time: 45 minutes

This task will help you understand modern frameworks

Break Time

15 Minutes

Take a break, ask questions, or catch up on the previous task.

Next: Secondary slides and Task 2

Advanced Performance Optimization

  • Code splitting and lazy loading
  • Tree shaking
  • Service worker caching
  • Image optimization
// Code splitting
const LazyComponent = React.lazy(() => import('./LazyComponent'));

// Service worker caching
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

Advanced Security

  • Content Security Policy (CSP)
  • Subresource Integrity (SRI)
  • HTTPS enforcement
  • Input sanitization
// CSP header
Content-Security-Policy: default-src 'self'; script-src 'self'

// SRI example
<script src="https://example.com/script.js"
  integrity="sha384-..."
  crossorigin="anonymous"></script>

Advanced Testing

  • Unit testing with Jest
  • Integration testing
  • End-to-end testing with Cypress
  • Visual regression testing
// Jest test example
test('renders user name', () => {
  render(<UserProfile name="John" />);
  expect(screen.getByText('John')).toBeInTheDocument();
});

// Cypress test
it('should login successfully', () => {
  cy.visit('/login');
  cy.get('[data-testid=email]').type('user@example.com');
  cy.get('[data-testid=password]').type('password');
  cy.get('[data-testid=submit]').click();
  cy.url().should('include', '/dashboard');
});

Modern Deployment

  • Continuous Integration/Deployment
  • Docker containers
  • Serverless functions
  • CDN optimization
// GitHub Actions workflow
name: Deploy to Production
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Deploy
        run: npm run deploy

Advanced Accessibility

  • ARIA live regions
  • Focus management
  • Screen reader optimization
  • Keyboard navigation
// ARIA live region
<div aria-live="polite" aria-atomic="true">
  Status updates appear here
</div>

// Focus management
function trapFocus(element) {
  const focusableElements = element.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
}

Internationalization (i18n)

  • Multi-language support
  • RTL layout support
  • Date and number formatting
  • Cultural considerations
// i18n example
const messages = {
  en: {
    welcome: 'Welcome'
  },
  es: {
    welcome: 'Bienvenido'
  }
};

// Date formatting
const date = new Date().toLocaleDateString('es-ES');

Micro Frontends

  • Independent deployment
  • Team autonomy
  • Technology diversity
  • Scalable architecture
// Module Federation
new ModuleFederationPlugin({
  name: 'host',
  remotes: {
    remote: 'remote@http://localhost:3001/remoteEntry.js'
  }
});

Web3 and Blockchain

  • Decentralized applications (dApps)
  • Smart contracts
  • Cryptocurrency integration
  • Web3.js library
// Web3.js example
const web3 = new Web3(Web3.givenProvider);

// Connect to wallet
async function connectWallet() {
  const accounts = await ethereum.request({
    method: 'eth_requestAccounts'
  });
}

AI and Machine Learning

  • TensorFlow.js
  • Natural language processing
  • Computer vision
  • Recommendation systems
// TensorFlow.js example
const model = tf.sequential({
  layers: [
    tf.layers.dense({units: 1, inputShape: [1]})
  ]
});

model.compile({
  loss: 'meanSquaredError',
  optimizer: 'sgd'
});

Voice and Speech APIs

  • Web Speech API
  • Speech recognition
  • Speech synthesis
  • Voice commands
// Speech recognition
const recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.onresult = function(event) {
  const transcript = event.results[0][0].transcript;
  console.log('Heard:', transcript);
};

// Speech synthesis
const utterance = new SpeechSynthesisUtterance('Hello World');
speechSynthesis.speak(utterance);

WebXR and AR/VR

  • WebXR Device API
  • Three.js for 3D graphics
  • AR.js for augmented reality
  • VR experiences
// WebXR example
navigator.xr.isSessionSupported('immersive-vr')
  .then(supported => {
    if (supported) {
      console.log('VR supported');
    }
  });

// Three.js scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

Task 2: Future Technology Implementation

Instructions:

  1. Choose one advanced technology to implement
  2. Options:
    • PWA: Convert existing app to PWA with offline functionality
    • Web Components: Create reusable custom elements
    • Web3: Integrate cryptocurrency wallet
    • AI/ML: Add machine learning features
    • Voice: Implement speech recognition/synthesis
  3. Research and implement the technology
  4. Document the implementation process
  5. Create a presentation showcasing your work
  6. Discuss potential use cases and limitations

Time: 45 minutes

This task will help you explore cutting-edge web technologies

Session Summary

  • Modern frameworks provide powerful development tools
  • PWAs bridge the gap between web and native apps
  • Web Components enable reusable, encapsulated code
  • Future technologies open new possibilities
  • Continuous learning is essential in web development
  • Stay updated with industry trends

Next Session:

Final Project and Assessment - Bringing it all together