Inesita

Frontend Framework

Transcript

1. Inesita Little princess among the frontend frameworks Michał Kalbarczyk
2. What is underneath ? • Ruby • Opal.rb • Sprockets • rails-assets • VirtualDOM
3. Who am I ? • Front-End framework • Components • Router • Store
4. How to start ? # Install gem $ gem install inesita # Create a sample application $ inesita new inesita_app # Change directory $ cd inesita_app # Run server $ bundle exec inesita server
5. Component class Clock include Inesita::Component def initialize @time = Time.now every 1 do @time = Time.now update_dom end end def render div class: 'clock' do text @time.strftime('%r') end end end $document.ready do Clock.new.mount_to($document['clock']) end
6. Component class CodeClock include Inesita::Component def render code do component Clock, props: { label: 'This is clock' } end end end
7. Component class Input include Inesita::Component def change(e) store.set_value(e.target.value) update_dom end def render text props['label'] input type: "text", class: "form-control", value: store.get_value, onchange: ->(e) { change(e) } end end
8. Application Inesita::Application.new( router: Router, store: Store, layout: Layout ).mount_to($document.body)
9. Router class Router include Inesita::Router def routes route '/', to: Home, props: {} route '/description', to: Description end end
10. Router class NavBar include Inesita::Component def render nav class: 'navbar navbar-default' do div class: 'container' do div class: 'navbar-header' do span class: 'navbar-brand' do text 'Inesita' end ul class: 'nav navbar-nav' do li class: "#{"active" if router.current_url?(:description)}" do a href: router.url_for(:description) do text 'Description' end end end end end end end end
11. Layout class Layout include Inesita::Layout def render div class: 'container' do component NavBar component outlet end end end
12. Store class Store include Inesita::Store def initialize @store = {} end def set_value(value) @store[:value] = value end def get_value @store[:value] end end
13. Store module ReposStore def init_repos_store @repos = [] end def fetch_repos Browser::HTTP.get 'https://api.github.com/repositories' do |req| req.on :success do |res| @repos = res.json update_dom end end end def repos @repos end end
14. Styles & Other @import "bootstrap" source 'https://rails-assets.org' do gem 'rails-assets-bootstrap' end • rails-assets • sass • sprockets
15. Links • https://inesita-rb.github.io/ • https://github.com/inesita-rb/inesita • https://github.com/inesita-rb/playground • https://github.com/inesita-rb/todomvc • http://inesita-playground.netlify.com/ • http://inesita-todomvc.netlify.com/
16. Thank you!