- Главная
- →
- Архитектура и производительность фронтенда
Structuring a Front-end in 2017 Архитектура и производительность фронтенда
Armando Canals is a full-stack engineer and entrepreneur. He has done extensive front-end development work for some of the world’s most well-known brands, companies, and start-ups. Most recently for Apple, Inc. by re-architecting their retail web-applications to scale to a rapidly growing global user base. Today, he is one of the co-founders of the package management startup, packagecloud.io.
Тезисы
Whether it's building a new web application or updating an existing codebase, structuring a web front-end is an important problem that application developers face.
The talk will start with a discussion about the organization of assets within an application (stylesheets, scripts, images, etc.) and how to recognize patterns within an application’s codebase to logically split up the code for ease-of-use and maintainability.
This discussion will move into managing front-end assets using package managers like NPM and Yarn and discuss the differences between the two. I will go over an example package.json (used by both Yarn and NPM) to install dependencies for development and production environments and explain why using package managers for front-end code makes sense for applications of any size or complexity. If time allows, we can also discuss how to move projects that aren’t using a front-end package manager to a more modern workflow.
This brings us to discussing JavaScript build tools, Webpack and Browserify, with regards to bundling modules (scripts, CSS, images, etc.) so they can be consumed in a browser environment. Focusing on webpack, I’ll go over an example webpack configuration using the project structure discussed earlier in the talk and showcase how it can be used to process SCSS files and ES6 code into usable, browser-friendly CSS and JavaScript.
I’ll conclude by demoing a functioning front-end application using a logical asset structure, third-party libraries installed from a public repository, and compiling local SCSS and ES6 code for use in a browser.
