Advanced JavaScript CSS Architecture Good Practices

 

Amanpreet Singh

(@apsdehal)

First Question

How does JavaScript works?

Concurrency Model

Based on Event loop

 

Has an event queue in which tasks to be executed are pushed

 

Single Threaded!

Title Text

while(queue.waitForMessage()){
  queue.processNextMessage();
}

Web Workers

Work in Background

Do heavy and intensive tasks

IIFE

Immediately Invoked Function Expression

Constructor Function

Call, Bind and Apply

Events

Prototypes

Main use when function is used as constructor for object

Loading Lazily

ENTER REQUIREJS

INSANE?

Isn't it?

 

You get modular code + Lazy load

Want to create modules only?

No lazy loading?

What if you had node.js like require system?

Enter Browserify!

Best Practices for JS

JSHint

JSCS

Use Grunt for automation

Design Patterns

Constructor Pattern

You have already seen this

Module Pattern

Revealing Module

Object Literal Pattern

 

These are the ones mostly used

For more refer 

JavaScript Design Patterns

By Addy Osmani

Anything else you want to know on JavaScript?

You forgot Promises

Anything else?

Testing!

CSS Efficiency

What we know?

- Reads from right to left

- Later selectors override the prior ones

- More specific selectors override less specific ones

- More nested the selector less efficient it is

Remember what classes mean in OOP?

Use classes the same way in CSS.

Ek Class, Ek Dushman

BEM-Methodology

Enter Architecture

Use SASS

Use Grunt

Compile SASS to CSS

Divide CSS into related partials

Use the class together in the code

Thank You!

 

?

Advanced JavaScript CSS Architecture Good Practices

By Amanpreet Singh

Advanced JavaScript CSS Architecture Good Practices

  • 1,194