Ruby Meditation #21 April 14, 2018 Kharkiv

1. Inesita
By Ihor Strumetskyi
SD Solutions

3. Hyperloop
The Complete Isomorphic Ruby
Framework

4. Inesita
Little princess among the frontend frameworks

5. Author

6. Key Features
● Simple
● Light
● Built on top of virtual-dom
● Livereload
● Slim and Sass by default
● Ruby ecosystem

7. Install
$ gem install inesita
$ inesita new inesita_app
$ cd inesita_app
$ bundle exec inesita server

8. Default
Directory
Structure
├── app
│ ├── application.rb
│ ├── components
│ │ ├── counter.rb
│ │ ├── description.rb
│ │ ├── home.rb
│ │ └── navbar.rb
│ ├── index.html.slim
│ ├── router.rb
│ ├── store.rb
│ └── stylesheet.css.sass
├── config.ru
├── Gemfile
├── Gemfile.lock
├── README.md
└── static
└── inesita-rb.png
3 directories, 14 files

9. Application
class Application
include Inesita::Component
inject Router
inject Store
def render
div.container do
component NavBar
component router
end
end
end
Inesita::Browser.ready? Do
Application.mount_to(
Inesita::Browser.body
)
end

10. Component
the core of Inesita
class Home
include Inesita::Component
def render
div.jubmotron.text_center do
img src: '/static/inesita-rb.png'
h1 do
text "Hello I'm Inesita"
end
component Counter, props: {
header: 'This is a sample counter'
}
end
end
end

11. Injections
Store
class Store
include Inesita::Injection
attr_accessor :counter
def init
@counter = 0
end
def increase
@counter += 1
end
def decrease
@counter -= 1
end
end

12. Router
Using inesita-router gem
class Router
include Inesita::Router
def auth
unless store.logged_in?
go_to('/login')
end
end
def routes
route '/', to: Home
route '/description', to: Description
route '/secret', to: List,
on_enter: method(:auth)
route '/login', to: Login
end
end

13. Lifecycle
methods
#hook and #unhook
class Home
include Inesita::Component
def after_mount(node)
puts "I'm mounted #{node}"
end
def before_remove(node)
puts "I'm removed #{node}"
end
def render
div.jubmotron
hook: hook(:after_mount),
unhook: unhook(:before_remove) do
"Hello"
end
end
end

14. Awesome Inesita
Link:
https://inesita.fazibear.me/#awesome-inesita

15. Example: https://sprintpoker.io/

16. Example: https://sprintpoker.io/

17. Example: https://sprintpoker.io/

18. Example: https://sprintpoker.io/

19. Make
Great in
Frontend

20. Resource: https://inesita.fazibear.me/