Published on

Zakat project for Sfera.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Casestudy 1.0 Improving the Front-End Development of Innovatin Process
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. Yoman Generator
  15. 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. 16. Why OpenStreetMap?
  17. 17. Data Matters OpenStreetMap Google Map
  18. 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. 19. Clients
  20. 20. Serach Dashboard Logstash Search Know what users are looking for.
  21. 21. And yes ... Github
  22. 22. User Interface Layout preview of Search Box
  23. 23. Why search is very important?
  24. 24. Our main feature What you can give Write things that you want to give for zakat.
  25. 25. Index Use words to search or separate them by tags.
  26. 26. Filter Filter Query by Price range.
  27. 27. Tags Filter Query by Tags.
  28. 28. Navigation Navigation search box
  29. 29. Autocomplete Use geo location to calculate places away from you.
  30. 30. Components dropdowns, input groups, navigation, alerts, and much more
  31. 31. Thank you.