Casestudy 1.0Improving the Front-End

Development of Innovatin Process

Dynamic models

Bootstrap 3Less.cssEmber.jsYeomanOpenStreetMapElastic Search

UI Interface

Why search is very important?Our main featureIndexFiltersTagsSingle PageAutocompleteComponents

Dynamic models

Bootstrap 3 /getbootstrap.com/

Bootstrap was created at Twitter in mid-2010 by @mdo and @fat. Prior to being an open-sourced framework, Bootstrap was known as Twitter Blue-print. A few months into development, Twitter held its first Hack Week and the project exploded as developers of all skill levels jumped in without any external guidance.

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

Rows must be placed within a .contain-er (fixed-width) or .container-fluid (full-width) for proper alignment and padding.Use rows to create horizontal groups of columns.

Content should be placed within col-umns, and only columns may be imme-diate children of rows.Predefined grid classes like .row and

.col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.

Columns create gutters (gaps between column content) via padding. That padding is o�set in rows for the first and last column via negative margin on .row

Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal col-umns would use three .col-xs-4.

Extra small devices Phones (<768px)Class prefix .col-xs-

Small devices Tablets (≥768px)Class prefix .col-sm-

Medium devices Desktops (≥992px)Class prefix .col-md-

Large devices Desktops (≥1200px)

Class prefix .col-lg-

Dynamic models

Less.CSS/lesscss.org/

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

Less Example @base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) { -webkit-box-shadow: @style @c; box-shadow: @style @c;}.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { .box-shadow(@style, rgba(0, 0, 0, @alpha));}.box { color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0 0 5px, 30%) }}

Selectors & URLs // Variables@mySelector: banner;

// Usage.@{mySelector} { font-weight: bold; line-height: 40px; margin: 0 auto;}

// Variables@images: "../img";

// Usagebody { color: #444; background: url("@{imag-es}/white-sand.png");}

Dynamic models

Ember.JS/emberjs.com/

Ember.js is an open-source client-side JavaScript web application framework based on the model-view-controller (MVC) software architectural pattern. It allows developers to create scalable single-page applications by incorporat-ing common idioms and best practices into a framework that provides a rich object model, declarative two-way data binding, computed properties, auto-matically-updating templates powered by Handlebars.js, and a router for managing application state.

Basic Concepts RoutesThe router is a core concept of Ember, empha-sizing the importance of the URL in managing application state. A route object corresponds to a URL and essentially serializes the application's current state. Routes are defined in the single-ton Router object.

ModelsEvery route has an associated model, contain-ing the data associated with the current state of the application. While one can use jQuery to load JSON objects from a server and use those objects as models, most applications use a model library such as Ember Data to handle this.

ControllersControllers are used to decorate models with

Basic Concepts

display logic. A controller typically inherits from ObjectController if the template is associated with a single model record and ArrayController if the template is as-sociated with a list of records.

TemplatesTemplates are written with the Handle-bars templating language to describe the user interface. Templates are used to build the application's HTML and embed dynamically-updating expressions.

ViewsViews are used to add sophisticated handling of user events, custom graphics not made with CSS, JavaS-

cript animations, or reusable behavior to a template.

ComponentsComponents are a specialized view for creating custom ele-ments that can be easily reused in templates. The Ember Compo-nents implementation conforms as closely as possible to the W3C Web Components specification.

Dynamic models

Yeoman/yeoman.io/

With so many great tools available to front-end web developers these days it can sometimes be di�cult to understand how they all fit together. Deciding on a workflow that you’re happy with is often a very personal endeavour, but getting started isn’t always easy. Yeoman aims to solve this problem by sca�olding workflows for creating modern webapps, while at the same time mixing in many of the best practices that have evolved within the industry.

A complete workflow might look like this:yo webapp # sca�old out a skeleton web app projectbower install underscore # install a dependency for your project from Bowergrunt # build the application for deploymentOr with the AngularJS generator:npm install -g generator-angular # install generatoryo angular # sca�old out a AngularJS projectbower install angular-ui # install a dependency for your project from Bowergrunt test # test your appgrunt serve # preview your app (formerly ̀ grunt server )̀grunt # build the application for deployment

Yoman Generator

Yoman Generator

Dynamic models

OpenStreetMap/openstreetmap.org/

OpenStreetMap is built by a community of mappers that contribute and maintain data about roads, trails, cafés, railway stations, and much more, all over the world.

OpenStreetMap's community is diverse, passionate, and growing every day. Our contributors include enthusiast mappers, GIS professionals, engi-neers running the OSM servers, humanitarians mapping disaster-a�ected areas, and many more. To learn more about the community, see the user diaries, community blogs, and the OSM Foundation website.

Why OpenStreetMap?

Data Matters

OpenStreetMap Google Map

Dynamic models

ElasticSearch/elasticsearch.org/

Elasticsearch is rapidly becoming the world’s most popular open source search solution.

With Elasticsearch embedded as a part of mission-critical production envi-ronments, we’re now providing reliable and scalable support and profes-sional services. To give our customers unmatched support, the core engi-neering team that built and maintains our open source search engine is the same team training and consulting customers in various phases of the development and deployment cycles.

Clients

Serach Dashboard

Logstash SearchKnow what users are looking for.

And yes ... Github

User InterfaceLayout preview of Search Box

Why search is very important?

Write things that you want to give for zakat.

Our main feature

What you can give

Use words to search or separate them by tags.

Index

Filter Query by Price range.

Filter

Filter Query by Tags.

Tags

Navigation search box

Navigation

Use geo location to calculate places away from you.

Autocomplete

dropdowns, input groups, navigation, alerts, and much more

Components

Thank you.