Mocking classes

For the GQL layer

Sam De Maeyer

@samdemaeyer

@sam_demaeyer

@samdemaeyer

Let's build a website

Let's use Ember.js

Let's use React.js

Step 1 - Create the project


 $ ember new static-ember-site


 $ npx create-react-app static-react-site

Size


~/Documents/web/static-ember-site [master|√]
$ du -sh
| 141M


~/Documents/web/static-react-site [master|√]
$ du -sh
| 201M

141MB

201MB


~/Documents/web/static-ember-site [master|√]
$ du -sh /dist
| 7.2M


~/Documents/web/static-react-site [master|√]
$ du -sh /build
| 488K

7.2MB

488KB

Remove jQuery

// config/optional-features.json
{
  "jquery-integration": false
}


~/Documents/web/static-ember-site [master|√]
$ du -sh /dist
| 6.6M


~/Documents/web/static-react-site [master|√]
$ du -sh /build
| 488K

6.6M

488KB

Remove jQuery

No jQuery

Remove unnecessary tools


~/Documents/web/static-ember-site [master|√]
$ du -sh /dist
| 5.0M


~/Documents/web/static-react-site [master|√]
$ du -sh /build
| 604K

5.0MB

604KB

ember-welcome-page,

ember-data and ember-ajax

react-router-dom

(https://reacttraining.com/react-router/web/guides/quick-start)

Let's build the app


~/Documents/web/static-ember-site [master|√]
$ du -sh /dist
| 5.2M


~/Documents/web/static-react-site [master|√]
$ du -sh /build
| 616K

5.2MB

616KB

Add Bootstrap

(https://startbootstrap.com/template-overviews/clean-blog)

Adding bootstrap, and a theme.

Add Bootstrap

(https://startbootstrap.com/template-overviews/clean-blog)

Let's build the app


~/Documents/web/static-ember-site [master|√]
$ du -sh /dist
| 11M


~/Documents/web/static-react-site [master|√]
$ du -sh /build
| 6.9M

11MB

6.9MB

A dd pages and images

Adding content and assets.

A dd pages and images

Let's build for production


~/Documents/web/static-ember-site [master|√]
$ du -sh /dist
| 6.4M


~/Documents/web/static-react-site [master|√]
$ du -sh /build
| 6.9M

6.4M

6.9MB


~/Documents/web/static-ember-site [master|√]
$ ember build --environment=production
Could not start watchman
Visit https://ember-cli.com/user-guide/#watchman for more info.
Environment: production
cleaning up...
Built project successfully. Stored in "dist/".
File sizes:
 - dist//assets/clean-blog.min.css: 6.37 KB (1.67 KB gzipped)
 - dist//assets/static-ember-site.css: 419 B (248 B gzipped)
 - dist//assets/static-ember-site.js: 23.58 KB (5.01 KB gzipped)
 - dist//assets/vendor.css: 146.08 KB (22.51 KB gzipped)
 - dist//assets/vendor.js: 485.82 KB (125.31 KB gzipped)


~/Documents/web/static-react-site [master|√]
$ yarn build -p
yarn run v1.9.4
$ react-scripts build -p
Creating an optimized production build...
File sizes after gzip:

  40.84 KB  build/static/js/1.c7046e5b.chunk.js
  21.85 KB  build/static/css/1.80d3ef0d.chunk.css
  3.85 KB   build/static/js/main.adf466e2.chunk.js
  1.75 KB   build/static/css/main.b6668315.chunk.css
  763 B     build/static/js/runtime~main.229c360f.js

Ember Lost Weight

Thank you Core Team

Thank you Ember.js Community

Thank You

Sam De Maeyer