Recommandé
Recommandé
Contenu connexe
Dernier
Dernier (20)
En vedette
En vedette (20)
SilverStripe & Vue.js - A case study
- 6. Vue.js Instance ...with minimal config: new Vue({ el: '#app', data: { message: 'Welcome to StripeCon EU 2018!' } }); <div id="app"> <span>{{ message }}</span> </div> StripeCon EU 18 :: Julian Scheuchenzuber <js@lvl51.de> :: Level51
- 12. Getting started # Install CLI npm i -g vue-cli # Lean setup vue init simple my-first-vue-app # Full Nerd-Mode setup vue init webpack my-crazy-vue-app cd my-crazy-vue-app && npm run dev StripeCon EU 18 :: Julian Scheuchenzuber <js@lvl51.de> :: Level51
- 21. Payload Injection Flow MariaDB fetch Interface JSONtoDOM Injection "Pickup" by Vue.js StripeCon EU 18 :: Julian Scheuchenzuber <js@lvl51.de> :: Level51
- 22. Posting Model Posting as central DataObject with several relations (CLImage, S3File, ....) Raw Query to minimize the load of DB operations Desired document format: - id: number - created: string - type: string - title: string - recommended: boolean - category: string - team: string - previewImage: string Full URL - asset: string Full URL - attachment: string Full URL (optional; e.g. .psd Files) StripeCon EU 18 :: Julian Scheuchenzuber <js@lvl51.de> :: Level51
- 23. Posting::fetch() /** * @param array $options * - limit: number, default: 40 * - offset: number, default: 0 * - type: string (see db enum field "Type") * - created: string (date) * - recommended: boolean * - category: string * - team: string * - term: string For free text search (>= 3 chars) * - sortOrder: string (ASC|DESC), default: DESC * - minID: int * * @return array Posting Documents * @throws FetchException */ public static function fetch(array $options = []): array; StripeCon EU 18 :: Julian Scheuchenzuber <js@lvl51.de> :: Level51
- 24. Injecting the payload public function index(SS_HttpRequest $req) { // Get options compliant with interface $opts = $this->extractFetchOptions($req); // Staging the posting payload for DOM injection PayloadInjector::stage([ 'postings' => Posting::fetch($opts); ]); return $this->renderWith('MainView'); } StripeCon EU 18 :: Julian Scheuchenzuber <js@lvl51.de> :: Level51
- 25. PayloadInjector ... ...collects array data through out request processing. ...normalizes data and converts it to JSON. ...hands it to the renderable data. Basically it's a convenience wrapper for: // Consider $data is everything you have "staged" so far Controller::curr()->customize([ 'Payload' => Convert::array2json($payload); ]); StripeCon EU 18 :: Julian Scheuchenzuber <js@lvl51.de> :: Level51
- 26. Making payload available for Vue.js <!-- MainView.ss --> <% if $Payload %> <script>window.payload = $Payload;</script> <% end_if %> Note: PayloadInjector will handle this in v2 StripeCon EU 18 :: Julian Scheuchenzuber <js@lvl51.de> :: Level51
- 27. Making payload available for Vue.js // main-view.js import Vue from 'vue'; // Initial data for Vue instance let data = { showPreview: false }; // Merging injected payload if (typeof payload !== undefined) Object.assign(data, payload); new Vue( el: '#app', data // <--- prepared payload is available through instance data prop ); StripeCon EU 18 :: Julian Scheuchenzuber <js@lvl51.de> :: Level51
- 28. Displaying the payload <!-- MainView.ss --> <div id="#app"> <main class="grid"> <div v-for="posting in postings" v-bind:key="posting.id" class="posting-card"> <h2>{{ posting.title }}</h2> ... </div> </main> </div> StripeCon EU 18 :: Julian Scheuchenzuber <js@lvl51.de> :: Level51
- 30. Subsequent Requests // main-view.js new Vue({ el: '#app', data, methods: { fetch(filterOptions) { axios.get('http://localhost:8080/posting', { params: { ...filterOptions } }).then(res => { const { payload } = res.data; // This mutates the postings prop of "data" // and triggers the attached reactive bindings this.postings = payload.postings; }); } } }); StripeCon EU 18 :: Julian Scheuchenzuber <js@lvl51.de> :: Level51
- 31. Validating the HTTP method for action mapping private static $url_handlers = [ 'posting/$id' => [ 'GET' => 'fetchPostings', 'POST' => 'createPosting' ] ]; ...powered by a Trait overloading RequestHandler's protected findAction() method. StripeCon EU 18 :: Julian Scheuchenzuber <js@lvl51.de> :: Level51
- 37. CQRS Utils: Config # config.yml Posting: extensions: - CQRSExtension('ID', [ 'store' => 'redis', 'db' => 2 ]) // Posting.php; content of $read_payload is considered the "Payload Manifest" private static $read_payload = [ 'ID', 'Title', 'Category' => 'getCategoryLabel', 'Tags' => [ 'required' => false, 'mapping' => 'getTagList' ] ]; StripeCon EU 18 :: Julian Scheuchenzuber <js@lvl51.de> :: Level51
- 38. CQRS Utils: IPayloadStore interface IPayloadStore { public function read(string $key): array; public function write(string $key, array $payload); public function delete(string $key); public function info(string $option = null): array; public function getName(): string; } StripeCon EU 18 :: Julian Scheuchenzuber <js@lvl51.de> :: Level51