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 ...
Search
Javier Martin Montull
February 14, 2017
Technology
0
39
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
90
Editing content in Invenio
jmartinm
0
54
BlogForever workshop - Invenio metadata curation
jmartinm
2
61
Other Decks in Technology
See All in Technology
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
260
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
620
ロールが細分化された組織でSREは何をするか?
tgidgd
1
160
伴走から自律へ: 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
visional_engineering_and_design
2
180
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
1.1k
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
220
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
270
AI エージェントと考え直すデータ基盤
na0
17
6.8k
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
190
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
3
140
PO初心者が考えた ”POらしさ”
nb_rady
0
220
LLM時代の検索
shibuiwilliam
2
620
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
GraphQLとの向き合い方2022年版
quramy
49
14k
Optimizing for Happiness
mojombo
379
70k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Designing for Performance
lara
610
69k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
BBQ
matthewcrist
89
9.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Documentation Writing (for coders)
carmenintech
72
4.9k
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