Zakat project for Sfera.

1. Casestudy 1.0
Improving the Front-End
Development of Innovatin Process

2. Dynamic models
UI Interface
Bootstrap 3
Less.css
Ember.js
Yeoman
OpenStreetMap
Elastic Search
Why search is very important?
Our main feature
Index
Filters
Tags
Single Page
Autocomplete
Components

3. 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 Blueprint. 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.

4. 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 .container (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 columns, and only columns may be immediate 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 offset
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 columns would use three
.col-xs-4.

5. 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-

6. 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.

7. 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%) }
}

8. Selectors & URLs
// Variables
@mySelector: banner;
// Usage
.@{mySelector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
// Variables
@images: "../img";
// Usage
body {
color: #444;
background: url("@{images}/white-sand.png");
}

9. 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 incorporating common idioms and best practices into a framework that provides a rich
object model, declarative two-way data binding, computed properties, automatically-updating templates powered by Handlebars.js, and a router for
managing application state.

10. Basic Concepts
Routes
The router is a core concept of Ember, emphasizing 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 singleton Router object.
Models
Every route has an associated model, containing 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.
Controllers
Controllers are used to decorate models with

11. 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 associated with a list of records.
Templates
Templates are written with the Handlebars templating language to describe
the user interface. Templates are used to
build the application's HTML and embed
dynamically-updating expressions.
Views
Views are used to add sophisticated
handling of user events, custom
graphics not made with CSS, JavaS-
cript animations, or reusable
behavior to a template.
Components
Components are a specialized
view for creating custom elements that can be easily reused in
templates. The Ember Components implementation conforms
as closely as possible to the W3C
Web Components specification.

12. Dynamic models
Yeoman
/yeoman.io/
With so many great tools available to front-end web developers these
days it can sometimes be difficult 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 scaffolding workflows for creating modern webapps, while at
the same time mixing in many of the best practices that have evolved
within the industry.

13. Yoman Generator
A complete workflow might look like this:
yo webapp
# scaffold out a skeleton web app project
bower install underscore # install a dependency for your project from
Bower
grunt
# build the application for deployment
Or with the AngularJS generator:
npm install -g generator-angular # install generator
yo angular
# scaffold out a AngularJS project
bower install angular-ui
# install a dependency for your project from
Bower
grunt test
# test your app
grunt serve
# preview your app (formerly `grunt server`)
grunt
# build the application for deployment

14. Yoman Generator

15. 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, engineers running the OSM servers, humanitarians mapping disaster-affected
areas, and many more. To learn more about the community, see the user
diaries, community blogs, and the OSM Foundation website.

16. Why OpenStreetMap?

17. Data Matters
OpenStreetMap
Google Map

18. 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 environments, we’re now providing reliable and scalable support and professional services. To give our customers unmatched support, the core engineering 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.

19. Clients

20. Serach Dashboard
Logstash Search
Know what users are looking for.

21. And yes ... Github

22. User Interface
Layout preview of Search Box

23. Why search is very important?

24. Our main feature
What you can give
Write things that you want
to give for zakat.

25. Index
Use words to search or
separate them by tags.

26. Filter
Filter Query by Price range.

27. Tags
Filter Query by Tags.

28. Navigation
Navigation search box

29. Autocomplete
Use geo location to calculate places
away from you.

30. Components
dropdowns, input groups, navigation,
alerts, and much more

31. Thank you.