Front-End Framework

Junghoo Cho

Example: Google Suggest

  • “No USC” extension to Google Suggest
    • No USC queries are allowed!
  • Q: How should we modify the code? What should we add?
  • Review the changes in the new code
  • As app becomes more complex, the code becomes uglier and more difficult to maintain

Challenges of Web Development

  • Q: What will Gmail code look like?
  • Challenges
    1. Code complexity
      • 10,000s of lines of JavaScript, HTML, CSS code
    2. Lack of modularity
      • Many global variables (both in JS and CSS) and name conflicts
      • Code maintenance difficulty
    3. Code reusability
      • Do we have to start from scratch all the time?
  • Idea
    • Can we develop and provide “library” of commonly-used independent modules?
    • Can we program at a higher-level than DOM elements?
  • Q: How can we split complex program into independent “modules”

Components

  • Basic idea: Any complex UI app consists of simple “components” Components
    • Each component is mostly generic and independent of others
    • Structure and develop the app to exploit this independence and reusability

Component-Based Development

  1. Split the app into hierarchy of simpler components
  2. Develop each component independently (with unit testing)
  3. Combine simple components into more complex ones
  • Advocated first by React, now adopted by all popular front-end frameworks
    • Reduces development and maintenance complexity
    • Local changes are limited to a particular component

kebab-case vs camelCase

  • Many frameworks often use
    • camelCase in JavaScript code: e.g., SearchBoxComponent
    • kebab-case in HTML (and filenames): e.g., <app-search-box>
  • This convention is because
    • HTML is not case sensitive, but dash is allowed in identifiers
    • JavaScript is case sensitive, but dash is not allowed in identifiers

What We Learned

  • Need for front-end framework
    • Any help for modular and reusable development of front-end code?
  • Component-based development
    • Modern frameworks split code into a collection of modular “components”
  • kebab-case vs camelCase
  • Next
    • We will learn Angular as example front-end framework
      • Similar to other popular frameworks
      • Requies TypeScript