Javascript

Search…
Javascript
How do we make our apps interactive with modern JS implementation
Jquery
We want to remove all the legacy jquery.
VueJs (new way)
app/views/layouts/new_layout.html.slim
1
= javascript_pack_tag "application"
Copied!
app/frontend/packs/vue-app.js
1
document.addEventListener('DOMContentLoaded', () => {
2
 new Vue({
3
 el: '[data-behavior="vue"]'
4
 })
5
})
Copied!
This waits for the DOM-tree to load and then starts to initialize a vue-app. It works just as jQuery, ready(), but without jQuery.
Components
Example
app/frontend/components/header.vue
1
<template lang="pug">
2
 .bg-black.text-white.sticky.top-0.z-10.transition-all.duration-300.ease-out(
3
 class="xl:text-gray-900"
4
 :class="scrolled ? 'xl:bg-white xl:shadow' : 'xl:bg-transparent xl:shadow-none'"
5
 )
6
 .container.relative
7
 slot
8
</template>
9
​
10
<script>
11
export default {
12
 data () {
13
 return {
14
 scrolled: false
15
 }
16
 },
17
 created () {
18
 document.addEventListener('scroll', () => {
19
 this.scrolled = window.pageYOffset != 0
20
 })
21
 }
22
}
23
</script>
Copied!
app/frontend/packs/vue-app.js
1
import Vue from 'vue/dist/vue.esm'
2
import Drawer from '../components/drawer'
3
​
4
Vue.component('app-drawer', Drawer)
Copied!
app/views/front/products/houses/show/_how_to.html.slim
1
.container.my-40
2
 .grid.items-center class="lg:grid-cols-2"
3
 = image_pack_tag 'products/houses/how-it-works.jpg', class: 'hidden lg:block'
4
 div class="lg:ml-16 xl:ml-32"
5
 .text-blue-500.text-sm.uppercase = t('.pretitle')
6
 = component 'title', tag: 'h2', class: 'text-5xl mb-4', content: t('.title').html_safe
7
 .grid.gap-6.mt-12
8
 app-drawer
9
 template slot="title"
10
 = icon "money-wallet-1", class: 'text-gray-700 flex-shrink-0 mr-3'
11
 h3.text-2xl.text-gray-900.font-medium = t('.drawers._1.title')
12
 = icon 'arrow-down-1', slot: 'arrow'
13
 p == t('.drawers._1.content')
Copied!
Linting
The vue plugin of eslint is set at the 'recommended' level to lint our code in .eslintrc.js.
1
yarn lint
Copied!
Known issue
vue-cli-service: command not found
Solution
rm -rf node_modules yarn.lock && yarn install
i18n
Gemfile
1
gem 'i18n-js'
Copied!
app/views/layouts/new_layout.html.slim
1
= javascript_tag do
2
 | I18n.locale = "#{I18n.locale}";
3
 | I18n.translations = #{raw I18n::JS.filtered_translations.to_json};
Copied!
app/frontend/packs/vue-app.js
1
import I18n from 'i18n-js'
2
​
3
global.I18n = I18n
4
Vue.prototype.$t = I18n.t
5
Vue.config.productionTip = false
Copied!
Usage
1
{{ $t('front.products.houses.show.hero.form.call_to_action') }}
Copied!
Tip: When going from i18n stored in Rails to i18n handled directly in the front, ruby -rjson -ryaml -e "puts YAML.load_file('path/file_to_convert.yml').to_json" will take a .yml file and output its corresponding JSON for ease of conversion.
VueJs (old way)
Forms
Even if some forms still use some jquery, most of the SeraphinWeb forms are enhanced with a Vuejs app
(#vueApp) to manipulate the DOM.
Profiling forms
The majority of our products purchase process begin with a profiling form to gather product oriented data and data from the user.
Two Vue apps are used : 
#vueApp- for all the product specific questions
#vueProfiling - for the generic shared questions on the user
The profiling Vue app :
is in shared partial, so it needs to be included in the view
needs to get data from the back end form : data: #{ raw form.serialized_data.to_json }
Note that the back end profiling form needs to have the serialized_datamethod accordingly.
Mixins
It exists a special Vue instance with sole purpose to be used as a mixin by other Vue app.
This Vue app is stateless and only contains helper methods.
Script
To enhance SeraphinWeb front end, some scripts are injected.
examples :
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src='https://maps.googleapis.com/maps/api/js?...'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/intro.min.js'></script>
Polyfills
Because SeraphinWeb needs to be compliant with old browsers (IE, safari...), polyfills are used.
examples :
<script src='https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js'></script>
Params
Webpacker
Last modified 10mo ago
Copy link
Contents