Download as PDF, PPTX
![jQuery plugin
;(function ( $, window, document, undefined ) {
var pluginName = "myPluginName",
defaults = {
propertyName: "value"
};
// The actual plugin constructor
function Plugin( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options) ;
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype.init = function () {
// Place initialization logic here
};
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if ( !$.data(this, "plugin_" + pluginName )) {
$.data( this, "plugin_" + pluginName,
new Plugin( this, options ));
}
});
}
})( jQuery, window, document );](https://image.slidesharecdn.com/architekturahtmlcssijavascript2-151127120821-lva1-app6892/85/HTML-CSS-Javascript-Architecture-extended-version-Jan-Kraus-18-320.jpg)
![module.exports = function(grunt) {
grunt.initConfig({
uglify: {
build: {
files: [{
cwd: 'src/js',
src: '**/*.js',
dest: 'build/bundle.min.js'
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
Grunt - Gruntfile.js](https://image.slidesharecdn.com/architekturahtmlcssijavascript2-151127120821-lva1-app6892/85/HTML-CSS-Javascript-Architecture-extended-version-Jan-Kraus-32-320.jpg)
![gulp - gulpfile.js
var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('uglify', function() {
return gulp.src(src/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['uglify']);](https://image.slidesharecdn.com/architekturahtmlcssijavascript2-151127120821-lva1-app6892/85/HTML-CSS-Javascript-Architecture-extended-version-Jan-Kraus-35-320.jpg)
![Git - commits convention
[FEATURE] Implements lazy loading for products carousel (max 70 chars)
Adds JS module to loads products for carousel using AJAX triggered after document
ready. Implementation is using sttic JSON as example.
- JS module to load products
- CSS for loading animation
- Example of JSON for products
Ref: JIRA-1392](https://image.slidesharecdn.com/architekturahtmlcssijavascript2-151127120821-lva1-app6892/85/HTML-CSS-Javascript-Architecture-extended-version-Jan-Kraus-48-320.jpg)
![jQuery plugin
;(function ( $, window, document, undefined ) {
var pluginName = "myPluginName",
defaults = {
propertyName: "value"
};
// The actual plugin constructor
function Plugin( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options) ;
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype.init = function () {
// Place initialization logic here
};
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if ( !$.data(this, "plugin_" + pluginName )) {
$.data( this, "plugin_" + pluginName,
new Plugin( this, options ));
}
});
}
})( jQuery, window, document );](https://image.slidesharecdn.com/architekturahtmlcssijavascript2-151127120821-lva1-app6892/75/HTML-CSS-Javascript-Architecture-extended-version-Jan-Kraus-18-2048.jpg)
![module.exports = function(grunt) {
grunt.initConfig({
uglify: {
build: {
files: [{
cwd: 'src/js',
src: '**/*.js',
dest: 'build/bundle.min.js'
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
Grunt - Gruntfile.js](https://image.slidesharecdn.com/architekturahtmlcssijavascript2-151127120821-lva1-app6892/75/HTML-CSS-Javascript-Architecture-extended-version-Jan-Kraus-32-2048.jpg)
![gulp - gulpfile.js
var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('uglify', function() {
return gulp.src(src/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['uglify']);](https://image.slidesharecdn.com/architekturahtmlcssijavascript2-151127120821-lva1-app6892/75/HTML-CSS-Javascript-Architecture-extended-version-Jan-Kraus-35-2048.jpg)
![Git - commits convention
[FEATURE] Implements lazy loading for products carousel (max 70 chars)
Adds JS module to loads products for carousel using AJAX triggered after document
ready. Implementation is using sttic JSON as example.
- JS module to load products
- CSS for loading animation
- Example of JSON for products
Ref: JIRA-1392](https://image.slidesharecdn.com/architekturahtmlcssijavascript2-151127120821-lva1-app6892/75/HTML-CSS-Javascript-Architecture-extended-version-Jan-Kraus-48-2048.jpg)
Uploaded byWomen in Technology Poland
HTML, CSS & Javascript Architecture (extended version) - Jan Kraus
This document discusses best practices for organizing code and setting up architecture for larger frontend projects with multiple developers. It covers choosing technology stacks, code organization, coding guidelines, responsive design approaches, performance optimization, and workflows.
In this document
Powered by AI
Introduction to HTML, CSS & JavaScript architecture. Discusses larger projects involving multiple developers, page types, long-term goals, and responsive design.
Exploration of coding guidelines and code organization techniques. Stresses importance of technology stack, performance, workflow, and best practices in coding.
Best practices for clean, well-formatted code. Focuses on HTML and CSS guidelines regarding selectors, structure, naming conventions, and accessibility.
CSS coding practices including shorthand properties, media queries, and organization, aimed at maintaining clarity and performance.
Guidelines for using SASS and JavaScript effectively, focusing on code formatting, module patterns, and tools for error checking.
Details Immediate Invoked Function Expressions, Revealing Module Pattern, and jQuery plugin structure for modular JavaScript programming.
Guidelines for using jQuery efficiently, including caching references, event binding, and AJAX syntax, along with serving files locally.
Overview of various server options like Apache2 and PHP built-in server, including Vagrant for creating a uniform development environment.
Introduces automation tools such as Grunt and Gulp for task management in coding workflows, detailing installation, configuration, and usage.
Explains npm and Bower as package managers for JavaScript and front-end libraries, including installation processes and configuration.
Introduction to semantic versioning and the use of web starter kits like Google Starter Kit and HTML5 Boilerplate for project initiations.
Fundamentals of Git, branching models, commands, and effective usage for version control in collaborative development environments.Discussion on major frameworks and tools including jQuery, Bootstrap, Backbone, Angular, and React, emphasizing their roles in development.
Principles of Responsive Web Design, focusing on mobile-first approaches and modular CSS methodologies like SMACSS and BEM for scalable projects.
List of resources for further learning in web development and design, concluding the presentation with a thank you.
More Related Content
Similar to HTML, CSS & Javascript Architecture (extended version) - Jan Kraus
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
HTML, CSS & Javascript Architecture (extended version) - Jan Kraus
- 1. HTML, CSS &Javascript Architecture In a little bit bigger projects… v2
- 2. Jan Kraus senior frontenddev / creativestyle
- 3. Part 1: ● Introduction ●Coding guidelines ● Servers ● Tools & automatization ● Starter templates ● Responsive web design Schedule Part 2: ● Git & team work ● Frameworks & libraries ● Modular CSS: SMACSS, BEM ● Javascript patterns ● Coding challenge, Q&A
- 4. A bigger project ●More than one frontend developer ○ sometimes more than 1 team ● Multiple & different page types ● Long term development goal ● Responsive ● Pure frontend or framework based solution
- 5. Architecture ● Technology stack(frameworks) ● Code organization ● Coding guidelines ● RWD ○ fluid vs. adaptive ○ Mobile first vs. desktop first ● Icons system / images ● Performance ● Workflow
- 6. Technology stack ● Backendframeworks ○ Rails ■ assets pipeline ○ Symfony ■ assetic ○ Node.js, ■ Express, Meteor, Sails ● Frontend frameworks ○ jQuery, Bootstrap, ○ Backbone ○ Angular, Ember, React
- 7. ● Maintain simple& clean structure for your code ○ keep your code separated in assets folders ■ javascripts ■ css / sass ■ images ■ fonts ■ other stuff ● look for best practices for your framework ● organize in modules instead by type Code organization
- 8. ● don’t mixspaces & tabs ○ I suggest to configure your editor to indent everything with 2 spaces ○ but this is never ending war ;-) ○ use good code editor ■ webstorm / phpstorm is quite powerful ● maintain clean & usable code ○ comment well ○ keep good variable names ○ use consistent naming convention ● UTF-8 everywhere ○ <div class="♫"> Coding guidelines
- 9. HTML guidelines ● keepthe code well formatted ● use html5 doctype ○ occasionally check it with W3C validator ● keep all tags lowercase ● wrap all attributes in double quotes ● try to write semantic html ○ but don’t overdo with html5 semantic tags ○ good reference at http://html5doctor.com/ ● keep in mind accessibility ○ learn about aria tags
- 10. ● keep thecode well formatted ● don’t rely on using ID-selectors for styling ● use lowercase-class-names ○ write semantic class names ○ separate with hyphens ○ unless you consider using BEM / SMACSS ● avoid long selectors ○ especially watch out for nesting in sass ○ learn & understand how CSS cascade works ○ avoid using !important CSS guidelines - selectors
- 11. ● use shorthandproperties ○ padding: 10px 20px; ● don’t overuse -vendor-prefixes too much ○ use autoprefixer ○ they need to come before standard property ● try to avoid using pixel units everywhere ○ learn about rems ● use #hex colors & rgba when wants opacity CSS guidelines
- 12. CSS guidelines ● keepmedia-queries close to relevant sections ● separate bigger sections with block comments ● organize code into meaningful sections ○ don’t write everything in the bottom ○ find the “right place”
- 13. SASS guidelines ● avoidnesting selectors ○ or try to keep it up to 2-3 levels ■ or really, avoid! ● use sass @imports to organize your css code ○ start name of imported partial with underscore ■ _grid.scss, _config.scss ○ organize into components, modules, shared etc.. ● use variables! ○ at least for colors & media-query breakpoints
- 14. Javascript guidelines ● keepthe code well formatted ● make sure you understand basics concepts of Javascript ● use single quotes for strings ● always use expanded blocks syntax ○ if (condition) { } ● use semicolons; ● var camelCase your variable & function names ● ModuleNames should start from capital letter
- 15. Javascript guidelines ● useJSHint or ESLint to catch your errors ● learn couple useful module patterns ○ jQuery plugin ○ http://addyosmani.com/resources/essentialjsdesignpatterns/book/ ○ http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html ● learn about ES6
- 16. Immediately Invoked FunctionExpression (function($, window, document) { // The $ is now locally scoped // Listen for the jQuery ready event on the document $(function() { // The DOM is ready! }); // The rest of the code goes here! }(window.jQuery, window, document)); // The global jQuery object is passed as a parameter
- 17. Revealing module pattern varMyModule = (function(window, undefined) { var myState = 0; function initialize() { console.log('Module initialized...'); } function setState(data) { state = data; } return { init: initialize, someOtherMethod: myOtherMethod }; })(window); MyModule.init(); // logs “Module initialized…” MyModule.setState(3);
- 18. jQuery plugin ;(function ($, window, document, undefined ) { var pluginName = "myPluginName", defaults = { propertyName: "value" }; // The actual plugin constructor function Plugin( element, options ) { this.element = element; this.options = $.extend( {}, defaults, options) ; this._defaults = defaults; this._name = pluginName; this.init(); } Plugin.prototype.init = function () { // Place initialization logic here }; $.fn[pluginName] = function ( options ) { return this.each(function () { if ( !$.data(this, "plugin_" + pluginName )) { $.data( this, "plugin_" + pluginName, new Plugin( this, options )); } }); } })( jQuery, window, document );
- 19. jQuery guidelines ● don’tabuse $(selector) ○ remember to cache references to object ○ keep prefix of your variable with $ to indicate its a jquery object ■ eg. $container = $('.container'); ● consider using custom class as hooks for your events ○ $('.js-button-submit') ● when binding events, preffer using .on() ○ Avoid anonymous functions for debugging ○ Use custom namespace for events ○ Use delegation
- 20. jQuery guidelines ● don’tput everything in $.ready function ● use $.ajax instead of $.get, $.post methods ● use Promise syntax for handling responses ○ $.ajax({ … }) ■ .done(successHandler) ■ .fail(errorHandler) ● don’t use jQuery animations ● avoid CSS changes via jQuery ○ prefer class toggling
- 21. jQuery guidelines ● usejquery 2.x ○ unless IE8 ● load it from external CDN for caching benefits ● don’t use too many jQuery plugins ○ check size ○ check github page for issues ● think twice before using jQuery UI ● bootstrap JS relies on jquery ● http://gregfranko.com/jquery-best-practices/
- 22. ● Working withfile:// protocol is unreliable. ● Use web server ○ Apache2 ○ PHP ○ Node.js ○ Ruby/Python ● Vagrant ● MAMP / WAMP ○ I don’t recommend Serving files locally
- 23. Apache2 ● Most popularserver ● Already available in Mac OS X & Ubuntu ○ Need little bit of tweaking, config breaks after update ● I guess also possible on Windows… ● Need to setup virtual hosts if you have multiple sites ○ I prefer to do this anyway
- 24. ● Easy touse ● Available from PHP 5.4 ○ Available in OS X (5.6), Easy to install on Ubuntu (5.5) ■ apt-get install php5 ○ I guess also possible on windows… ● php -S localhost:8080 PHP built-in server
- 25. ● Useful whenyou’re building Webapp / SPA ● Just one gulp plugin ○ npm install --save-dev gulp-connect ● Not so easy for dynamic templates gulp.task('server', function() { connect.server(); }); Node.js / gulp-connect
- 26. ● Full OSusing virtualization ● Every developer have the same environment ● Powerful configuration ○ You can keep that in git ○ Requires some knowledge ● Useful for framework setup with lots of dependencies ● Slow and problematic on windows Vagrant
- 27. Automatization ● Compile &minify SASS ● Concatenate / minify javascript files ● Optimize images ● Generate sprites ● Code linting ● Autoreload ● Deployments
- 28. Task runners There aremany ways to do it ● Grunt ● Gulp ● node.js ● Shell
- 29. Grunt The JavaScript TaskRunner ● Configuration… ● Lots of plugins ● Operates on files ● But… ○ Seems like not updated lately ○ Community shifted to gulp
- 30. ● Install gruntCLI ○ npm install -g grunt-cli ● Install local plugins ○ npm install grunt-contrib-uglify --save-dev ● Configure ○ Gruntfile.js ● Run: ○ grunt Grunt
- 31. Grunt - package.json { "name":"my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-uglify": "~0.5.0" } }
- 32. module.exports = function(grunt){ grunt.initConfig({ uglify: { build: { files: [{ cwd: 'src/js', src: '**/*.js', dest: 'build/bundle.min.js' }] } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', ['uglify']); }; Grunt - Gruntfile.js
- 33. Automate and enhanceyour workflow ● Gulp is the new grunt ● Active community ● Simple configuration ● Organized around streams ● Faster & less config gulp.js
- 34. gulp.js ● Install gulp ○npm install --global gulp ○ npm install --save-dev gulp ● Install plugins ○ npm install --save-dev gulp-uglify ● Configure ○ gulpfile.js ● Run: ○ gulp
- 35. gulp - gulpfile.js vargulp = require('gulp'); var uglify = require('gulp-uglify'); gulp.task('uglify', function() { return gulp.src(src/**/*.js') .pipe(uglify()) .pipe(gulp.dest('dist')); }); gulp.task('default', ['uglify']);
- 36. npm & node.jspackages npm is the package manager for node.js ● pure node.js packages ● simple setup, without much of configuration ● easy to maintain
- 37. npm ● Install package ○npm install jshint --save-dev ● Configure ○ package.json ● Run ○ npm run script name
- 38. npm - package.json "devDependencies":{ "jshint": "latest", }, "scripts": { "lint": "jshint **.js" }
- 39. A package managerfor the web ● manage & download external dependencies ● fetch and update frontend libraries Bower
- 40. ● Install bower ○npm install -g bower ● Configure ○ .bowerrc ■ {"directory": "assets/vendors/"} ● Install ○ bower install jquery --save-dev Bower
- 41. { "name": "Sample Project", "devDependencies":{ "jquery": "~2.1.4" } } Bower - bower.json
- 42. Semantic versioning Semantic versioning:MAJOR.MINOR.PATCH ● Patch releases: 1.0 or 1.0.x or ~1.0.4 ● Minor releases: 1 or 1.x or ^1.0.4 ● Major releases: * or x
- 43. Getting started Take somethingas your starting point: ● Web Starter Kit from Google ● HTML5 Boilerplate ● Bootstrap ● yeoman generator
- 44. Web Starter Kitis an easy way to start a new project. ● build process, ● boilerplate HTML ● styles (material design) Web Starter Kit from Google
- 45. HTML5 Boilerplate The web’smost popular front-end template ● HTML Page Structure ● Normalize.css ● Modernizr.js ● jQuery from CDN with local fallback
- 46. Bootstrap from Twitter Bootstrapis the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. ● Not really a boilerplate ● But you can use basic template ● http://getbootstrap.com/getting-started/#template
- 47. ● Start usinggit if you haven’t already started ○ Github - free for open source projects ○ Bitbucket - unlimited private repositories, limited users ○ Gitlab - self hosted github UI clone Git
- 48. Git - commitsconvention [FEATURE] Implements lazy loading for products carousel (max 70 chars) Adds JS module to loads products for carousel using AJAX triggered after document ready. Implementation is using sttic JSON as example. - JS module to load products - CSS for loading animation - Example of JSON for products Ref: JIRA-1392
- 49. ● Basic ○ onlydev / master ● Feature branches ○ use pull / merge requests for code review ● Gitflow ○ when working on multiple releases & feature branches Git - Branching model
- 50. ● git status ○read what’s there ;-) ● git reset ○ git reset ○ git reset head --hard ○ git reset origin/master --force ● git revert ○ git revert commit-sha ○ creates new commit Git - Command line
- 51. ● git cherry-pick ○git cherry-pick commit-sha ○ creates new commit ● git rebase ○ git rebase -i head~2 ○ is rewriting history ● git merge ○ git merge your-branch-name ○ resolve conflicts correctly Git - Command line
- 52. ● git pull ○git fetch origin + git merge ○ git pull --rebase ■ create cleaner history ● git stash ○ git stash ○ git stash pop ● git log ○ git lg ○ git lg | grep JIRA-1234 Git - Command line
- 53. ● Libs ○ jQuery ○Bootstrap ○ Modernizr ● Frameworks ○ Backbone ○ Angular, Angular2 ○ Ember ○ React Framework & tools
- 54. jQuery ● Site enhancements ○sliders ○ galleries ○ AJAX ○ not much business logic ● DOM manipulation ● Simple custom event system ● Form validation ○ parsley.js
- 55. Bootstrap ● UI libraryfor the web ● SCSS / Less components ○ Include only what you need with sass imports ○ You can use SASS @extend ● Same for JS ○ you can include only what you need ● Useful ○ grid ○ forms ○ modal
- 56. Modernizr ● Feature detectionfor browsers ○ append CSS classes to html ○ Modernizr JS object for testing properties ● Generate custom build ● Does not have to be included in the head
- 57. Backbone.js ● Simple structurefor web application ○ Models, Collections, Views, Routers ○ Less abstraction ○ Simple, still popula ● http://addyosmani.github.io/backbone-fundamentals/
- 58. Angular ● The “enterprise”frameworks ● Most popular kinda MVC framework ● Easy 2 way binding ● Performance issues ● Angular 2 on the way
- 59. React ● Library fromFacebook ● High performance ○ Virtual DOM ● Organized around components & state
- 60. Useful libraries ● Moment.js ●History.js ● Respond.js ○ not really usefull ● Typeahead ● Parsley.js
- 61. RWD - Responsiveweb design ● Mobile first approach ● Stop thinking in pixels ○ Multiple devices, screens, widths... ● Progressive enhancement / graceful degradation ● SVG & retina images ● Build your site with performance in mind ● Read often: ○ http://www.smashingmagazine.com/ ○ https://css-tricks.com/
- 62. Modular CSS ● Reusablecomponents ● Naming convention for CSS classes ○ SMACSS ○ BEM ○ OOCSS
- 63. Scalable & ModularArchitecture for CSS ● Simple naming conventions ● Architecture & patterns for organizing rules ● Free book: ○ https://smacss.com/book/ SMACSS
- 64. -theme.scss - theme/_base.scss - theme/base/_reset.scss -theme/base/_headings.scss - theme/_layout.scss - theme/layout/_masthead.scss - theme/layout/_main.scss - theme/layout/_footer.scss - theme/_modules.scss - theme/modules/_search.scss - theme/modules/_gallery.scss - theme/_state.scss - theme/state/_mediaqueries.scss SMACSS - Organization
- 65. BEM BEM – BlockElement Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end ● Naming conventions ● Independent modular blocks ● Flexible and allows for customization
- 66. BEM - Example .block{} .block__element {} .block--modifier {} // example of search for .site-search {} /* Block */ .site-search__field {} /* Element */ .site-search--full {} /* Modifier */
- 67. BEM Learn more aboutBEM: ● http://getbem.com/ ● https://css-tricks.com/bem-101/ ● http://csswizardry.com/2013/01/mindbemding-getting-your-head-round- bem-syntax/ ● http://www.smashingmagazine.com/2012/04/a-new-front-end- methodology-bem/
- 68. Learn more ● http://www.smashingmagazine.com/ ●https://css-tricks.com/ ● JS News Facebook group: https://www.facebook. com/groups/217169631654737/ ● https://www.reddit.com/r/webdev ● Newsletters: ○ http://html5weekly.com/ ○ http://css-weekly.com/ ○ http://javascriptweekly.com/
- 69.