Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Creating a complex Angular 2 application - 3rd Developer's conference, CERN
Search
Javier Martin Montull
February 14, 2017
Technology
0
29
Creating a complex Angular 2 application - 3rd Developer's conference, CERN
Javier Martin Montull
February 14, 2017
Tweet
Share
More Decks by Javier Martin Montull
See All by Javier Martin Montull
Invenio Interest Group - INSPIRE HEP
jmartinm
0
63
Editing content in Invenio
jmartinm
0
47
BlogForever workshop - Invenio metadata curation
jmartinm
2
53
Other Decks in Technology
See All in Technology
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
3
570
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
360
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
0
380
Azureの基本的な権限管理の勉強会
yhana
0
600
Cypress or Playwright?
rainerhahnekamp
0
110
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
340
On Your Data を超えていく!
hirotomotaguchi
2
690
require(ESM)とECMAScript仕様
uhyo
3
780
アクセス制御にまつわる改善 / Improving access control
itkq
0
550
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
1
120
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.7k
一生覚えておきたい「システム開発=コミュニケーション」〜初めての実務案件振り返りLT〜
maimyyym
1
170
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Six Lessons from altMBA
skipperchong
21
3k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Become a Pro
speakerdeck
PRO
11
4.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
A designer walks into a library…
pauljervisheath
200
23k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Making Projects Easy
brettharned
108
5.5k
Building an army of robots
kneath
300
41k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Transcript
Building a complex Angular 2 application A Journey Javier Martín
Montull 14th February 2017, It’s about U and I Conference, CERN
The challenge
MARC-XML JSON
Devs Librarians
None
–Anonymous INSPIREHEP cataloger How are we going to edit the
content now?
–Anonymous INSPIREHEP developer JSON is a standard, we can use
some ready made solution
https://github.com/jdorn/json-editor
https://github.com/josdejong/jsoneditor
None
Time to build our own (with Angular 2)
Wait, what is TypeScript?
Angular 2 is built with TypeScript Features of ES6 (classes,
inheritance, modules,…) + typings Nice integration in IDEs like VisualStudio Code Get errors early on, good autocompletion Easy to work with
Less concepts and easier than Angular 1 Module Component Metadata
Template Data Binding Service Directive Dependency Injection First observations
Code can be easily organized HTML template Logic Tests Styling
How to get started with your application
Starter packs https://github.com/AngularClass/angular2-webpack-starter https://github.com/angular/angular-cli Nice defaults out of the box
Opinionated for good or bad Started with: Went with:
So we started building our app
https://github.com/inspirehep/record-editor/issues/2 First prototype
Our first road block
None
How change detection works in Angular 2 Source: https://blog.thoughtram.io/angular/2016/02/22/angular-2- change-detection-explained.html
None
None
None
The JSON files on INSPIRE can have up to 2000
authors and 100s of references - 1MB Change detection made the interface VERY slow
Smarter change detection with Immutable JS
None
Before After
What about styling?
https://github.com/valor-software/ng2-bootstrap https://github.com/angular/material Bootstrap 3 & 4 components Material Design components
Official from angular organization Very popular Semantic versioning not respected
Code quality and deployment
None
Code quality (tslint) https://github.com/palantir/tslint Custom lint rules Inline disabling /
enabling of rules Automatic fixing of formatting & style violations Integration with IDEs and build systems (Gulp JS)
Testing
Unit test with Karma + Jasmine
Code coverage with Karma + Istanbul coveralls.io
End-to-End tests with Protractor https://github.com/angular/protractor Protractor runs tests against your
application running in a real browser, interacting with it as a user would.
Documentation
https://github.com/TypeStrong/typedoc
Automatic deployment to npm and github pages
Done through Travis CI deploy: provider: npm skip_cleanup: true email:
[email protected]
api_key: secure: ZO0gp0WoyzYY6/UBbwJVIH8Dt0Vay2Dvc on: tags: true repo: inveniosoftware-contrib/ng2-json-editor all_branches: true node: '6.9.1' after_deploy: - ./deploy-gh-pages.sh (extract of .travis.yml)
Getting closer to the goal
None
None
https://github.com/inveniosoftware-contrib/ng2-json-editor Thank you https://github.com/inspirehep/record-editor