First indico workshop
This presentation is the property of its rightful owner.
Sponsored Links
1 / 40

First Indico Workshop PowerPoint PPT Presentation


  • 99 Views
  • Uploaded on
  • Presentation posted in: General

First Indico Workshop. Front-end. 27-29 May 2013 CERN. Alejandro Avilés. Indico Front-End. The timeline. Indico Stone Age. Indico Modern Ages. Indico Space Age. 2002. 2007. 2013. 201X. Stone Age. Indico 0.1. The path of the Spartan. HTML. Indico zero day.

Download Presentation

First Indico Workshop

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


First indico workshop

First Indico Workshop

Front-end

27-29 May 2013 CERN

Alejandro Avilés


Indico front end

Indico Front-End

The timeline

Indico

Stone Age

Indico

Modern Ages

Indico

Space Age

2002

2007

2013

201X


Stone age

Stone Age


Indico 0 1

Indico 0.1

The path of the Spartan

  • HTML


Indico zero day

Indico zero day

HTML is cool but not alone

  • The pains:

  • > Style, layout and content altogether!

  • > No client-side scripting

  • > No Asynchronous queries

These parties tend to end up very badly

Sluggishness and lack of flexibility


A bit latter

A bit latter…


Indico later javascript

Indico later – Javascript

Before jQuerywas cool…

  • Prototype.js framework

  • > Extends the DOM and Javascript core

  • > Supports AJAX and classes

  • Presentation.js

  • > Adds some Javascript bindings: $E, $D, $L…

  • > VERY hard to debug

  • You can still find remnants of this in the current source code


Modern ages

Modern Ages


Indico now

Indico NOW

Since 2007, the core of Indico has been improved

LevelUP


Indico now styling

Indico NOW – Styling

Styling more and better with CSS3

  • More beautiful styling:

  • > Round borders

  • > Shadows

  • > Gradients

  • > …


Indico now styling1

Indico NOW – Styling

Round borders with CSS3


Indico now styling2

Indico NOW – Styling

Gradients with CSS3

  • background-color: #1a82f7;

  • background: url(images/linear_bg_2.png);

  • background-repeat: repeat-x;

  • background: -moz-linear-gradient(top, #2F2727, #1a82f7);

  • background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));


Indico now styling3

Indico NOW – Styling

Icomoon.io Ultimate

  • Font-based icons

  • > Vectorized icons

  • > Light-weight

  • Tons of icons available (1000+)

  • > Free & premium icon packages


Indico now styling4

Indico NOW – Styling

And also organizing CSS files

  • A single CSS file is no good!

  • > Default.css(~9000 LOC)

  • Per topic CSS files:

  • > buttons.css

  • > toolbars.css

  • > tables.css

  • > …


Indico now javascript

Indico Now – Javascript

Javascript? Piece of cake!


Indico now javascript1

Indico Now – Javascript

So, why jQuery?

  • Makes working with Javascript a breeze:

  • > DOM traversal and manipulation

  • > Event handling

  • > Ajax

  • > Animations

  • It’s VERY easy to extend!


Indico now javascript2

Indico Now – Javascript

Showing off jQuery sweetness

  • .html

  • .js

<button class=“continue”></button>

$("button.continue”).html(“Next Step...”)


Indico now javascript3

Indico Now – Javascript

Showing off jQuery sweetness

  • .html

  • .js

<div id=“banner-message”>

<button class=“continue”></button>

</div>

varhiddenBox = $(“#banner-message”);

$(“#button-container button”).on(“click”, function(event) {

hiddenBox.show();

});


Indico now javascript4

Indico Now – Javascript

Showing off jQuery sweetness

  • .js

$.ajax({

url: "/api/getWeather",

data: {

zipcode: 97201

},

success: function( data ) {

$( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );

}

});


Indico now javascript5

IndicoNOw– Javascript

Moving away from Prototype.js

  • Functional programming support:

  • > Collections

  • > Functions to work with objects

  • Also for client-side templating:

  • > Useful when we need to append HTML with scripts

  • Doesn’t fiddle with built-in Javascript objects

Take that Prototype.js!


Space age

Space Age


Possible styling

Possible Styling

Empowering CSS3 with preprocessors

  • Maintaining robust CSS rules

  • is becoming difficult

  • Available solutions:

  • > LESS

  • > SASS

http://lesscss.org

http://sass-lang.com/


Possible styling1

Possible Styling

What do we get with LESS or SASS?

  • Nifty tools!

  • > Nested rules

  • > Variables

  • > Mixins

  • > Inheritance


Possible styling2

Possible Styling

What do we get with LESS or SASS?


Possible styling3

Possible Styling

What do we get with LESS or SASS?

  • Nifty tools!

  • > Nested rules

  • > Variables

  • > Mixins

  • > Inheritance


Possible styling4

Possible Styling

What do we get with LESS or SASS?


Possible styling5

Possible Styling

What do we get with LESS or SASS?

  • Nifty tools!

  • > Nested rules

  • > Variables

  • > Mixins

  • > Inheritance


Possible styling6

Possible Styling

What do we get with LESS or SASS?


Possible styling7

Possible Styling

What do we get with LESS or SASS?

  • Nifty tools!

  • > Nested rules

  • > Variables

  • > Mixins

  • > Inheritance


Possible styling8

Possible Styling

What do we get with LESS or SASS?


Possible styling9

Possible Styling

LESS vs SASS

  • They both offer pretty much the same, but…

  • > SASS has Compass

  • > SASS can be bundled with Indico

  • (Python implementation)

  • Want to know more? Read this:

  • > Review: http://css-tricks.com/sass-vs-less/

  • > Comparison: https://gist.github.com/cloudhead/1591333


Possible styling10

Possible Styling

Compass: A CSS authoring framework

  • Built on top of SASS

  • Powerful mixins

  • > Forget about browser suffixes!

  • Scaffolding

  • > Blueprint (similar to Twitter Bootstrap)

  • Review:

  • http://www.zivtech.com/blog/css-suckers-introduction-sass-compass


Possible styling11

Possible Styling

Compass example

#border-radius {

@include border-radius(25px);

}

#border-radius {

-webkit-border-radius: 25px;

-moz-border-radius: 25px;

-ms-border-radius: 25px;

-o-border-radius: 25px;

border-radius: 25px;

}


Possible styling12

Possible Styling

Blueprint / Twitter Bootstrap

  • Frameworks to start looking good

  • from scratch!

  • They provide:

  • > Scaffolding

  • > Base CSS

  • > Components


Yet another javascript boost

Yet another Javascript Boost?

Lots of libraries out there for making life easier

  • Backbone.js

  • > Model-View-Controller framework

  • Angular.js

  • > Embedding views in HTML

  • But, maybe, before that:

  • > Finish migration to jQuery

And beware of

jQuery 2.0!


Yet another javascript boost1

Yet another Javascript Boost?

  • Gives structure to web applications by providing:

  • > Models

  • > Collections

  • > Views

  • Works over Underscore.js


Yet another javascript boost2

Yet another Javascript Boost?

  • HTML enhanced for web apps!

  • Helps making dynamic webpages by using views

  • > No need to use server-side templating

<li ng-repeat="todo in todos">

<input type="checkbox" ng-model="todo.done">

<span class="done-{{todo.done}}">{{todo.text}}</span>

</li>


Yet another javascript boost3

Yet another Javascript Boost?

Ender.jit.su

  • Javascript dependencies manager:

  • > Build only what you need when you need it

  • > NPM-like package manager for the browser

“search, install, manage, and compile front-end JavaScript packages and their dependencies for the web”


Questions

Thank you for your time!

Questions?

Follow up the discussion

http://indico-software.org/wiki/Dev/INTREPID/13


First indico workshop

Alejandro Avilés

http://github.com/omegak

@OmeGak


  • Login